Extend div outside bounds of iFrame?

Question

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>:

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

iframe {
   overflow: visible
}

Here's a Test Case on Plunker

JavaScript:

$("#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:

<button id="OpenSelect2">Open Modal with Select2</button>

select2.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.

Avalanche

Answer 1

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):

Mimosaceous

I agree "An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website." – Bellyache

meh, I feared as much, but I was unwilling to accept my fate until I checked. – Avalanche

Answer 2

Being that the short answer is no, it's worth pointing out that it's not always necessary to load external content via an iframe. If, for example, you're working in PHP, you can simply call file_get_contents($filename) to simply plonk the desired content onto the current page.

This will clearly be limited to relatively straightforward HTML, but it certainly has its uses.

Marjie

Yeah, that's gonna be the best fix for most people. I did include that as the most obvious possible workaround in my original question, but enough people probably scroll right to the answers that it's probably worth including here as well. – Avalanche

Thanks for the response. I saw you made that point, but I thought it was worth specifying how that can be done in a usually workable way. Otherwise, it sounded like you were just telling folks to give up! – Marjie