Extend div outside bounds of iFrame?

Profile picture for KyleMit
KyleMit

Is it possible to extend content beyond the bounds of an iframe?

In my case, I was formerly rendering a native <select> control inside of an iframe. As a native control, when it rendered, the dropdown was able to occupy space outside of the iframe. I recently converted the dropdown to use select2, which rebuilds the dropdown using various <span> elements.

The problem is now it gets cutoff within the <iframe>:

Demo

I've tried setting the overflow to visible, but that doesn't work:

<!-- language: lang-css--> 
iframe {
   overflow: visible
}

Here's a Test Case on Plunker

JavaScript:

<!-- language: lang-js --> 
$("#OpenSelect2").click(function(){
 OpenPagePopup("select2.html", "Select 2", 150, 400);
});

//Open Diagnosis Control for editting
function OpenPagePopup(location, title, ht, wt) {
  $('<div>')
      .append($('<iframe/>', {
          'class': "fullFrame",
          'src': location
      }))
      .dialog({
          autoOpen: true,
          modal: true,
          height: ht,
          width: wt,
          title: title
      });
}

index.html:

<!-- language: lang-html --> 
<button id="OpenSelect2">Open Modal with Select2</button>

select2.html:

<!-- language: lang-html --> 
<select class="select2">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
</select>

<script >
  $('.select2').select2();
</script>

Possible Workaround:

DON'T USE IFRAMES! Yeah, I know, I know, but this is the situation I find myself maintaining.

No. There is no way to extend content outside of an iframe. Think of it as another browser window entirely.

The reason that the options will extend below the iframe is that form elements follow their own rules. They differ from browser to browser, and for some of the elements you can't change the styling. When you use select2 it turns the form into a regular element (not a default form element), so you can manipulate the style. Unfortunately, this also makes it confine to the iframe.

Consider that a browser can also do this (but it doesn't mean you can):

Example