3

I know this has been asked many times before, but please read on.

In bootstrap 3, I am trying to get an iframe to fill out a div.

I have scoured the internet and SO extensively, and tried every single thing I have come across with no luck.

Here is the scoop:

  1. I need to load an html-page in a narrow div ID. It is not cross-domain; I have control over both.
  2. I need to be able to style the content inside the iframe. Can I do that from "master" page (i.e the target page), or do I need to do that in the "incoming page", i.e. the iframe content html?
  3. the iframe must be flexible: the height and width (width because of responsive design) need to expand according to content.

I am desperate, and wondering if Bootstrap3 is overriding something?

I have tried a desperate amount of css alteration in combination with the long list of css and js-solutions listed below.

Here are a bunch of things (not all) I have tried :-S

Community
  • 1
  • 1
benteh
  • 2,218
  • 4
  • 31
  • 41
  • You say 'you have control of the domain' but are they the *exact* same domain? even down to the protocol? If not, there's nothing you can do. – Rory McCrossan Aug 17 '13 at 14:39
  • I would say yes. This _might_ change some point in the future, but for now they are the same. – benteh Aug 17 '13 at 14:42

2 Answers2

4

Some options:

1: Try making the iframe responsive. iframes can't automagically expand, so you're going to have to decide on a good height, or use JavaScript. For width, bootstrap has you mostly covered. You do need to make a div around the iframe to respond for it. Then set the iframe's width css to 100%.

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
             <h1>I'm the left column</h1>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <iframe style="width: 100%;" src="http://..." height="200px"></iframe>
        </div>
    </div>
</div>

demo

2: Don't use an iframe. If it's on the same origin, use a function like $.load.

$('#targetlocation').load('/usually_in_an_iframe.html #main_element');

3: a combination of #1 and that fit a frame to its height question you linked to

Brigand
  • 84,529
  • 20
  • 165
  • 173
  • Thank you, I will fiddle away at this; and for the record; Jquery is entirely acceptable. – benteh Aug 17 '13 at 15:21
  • Just an update: i can use load() with the following oddities: it will not work locally on Chrome, but works in FF. If uploaded to server, it works in Chrome. I have no problem getting the iFrame to adjust to width; height is still a major problem. – benteh Aug 18 '13 at 11:24
  • It's a security feature; you can't query for files with file urls. If you run a server, though, it will work. If you're using load, height shouldn't be a problem because there's no iframes. – Brigand Aug 18 '13 at 11:26
  • 1
    Yes, I gathered that. I treat them as two separate things at the moment. The load works fine, iframe hight a nightmare. Not giving up, though, and I will report back in case this might be useful for others in the future. – benteh Aug 18 '13 at 11:37
  • Update: I get the iframe to adjust to height with the help of the following code: http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/ This will make the iframe adjust to 100% height when the _whole_ page loads. The next problem though, is that I cannot get hight adjustment when the _content_ of the iframe changes. Imagine: iframe loads fine. Inside the iframe is a collapse, and when I click on it to "drop down" collapse, I get the scrollbars. :-( Not giving up.. – benteh Aug 18 '13 at 13:11
3

Bootstrap 3.2 has released a handy responsive iframe class:

http://getbootstrap.com/components/#responsive-embed

i.e:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>
KingBowen
  • 240
  • 3
  • 9