0

I am creating a webpage that uses an autogenerated html file from the python library Bokeh. I use the library to export an html file and then use an iframe to display the information.

I cannot figure out any way to center the contents of this iframe.

My attempted CSS code looks something like this:

div.box {
    display: block;
    margin:auto;

    }

iframe.d {
      border: none;
      width: 100%;
      display:block;
    }

With a body that looks like:

<div class = 'box'>
    <iframe class = 'd' src='graphs.html' id = 'beautifulgraphs' onload='autoResize("beautifulgraphs")'></iframe>
</div>

But I hope you can view the plunker below to see the problem in action.

Here is a plunker link to my HTML: Plunker HTML

I have attached instructions on how to see the issue on the plunker readme but please preview the code and then use the small blue button to pop out the preview to full screen mode. It will then become apparent that the centering is not working.

I have attempted the suggestions on this link already to no success.

Abdall
  • 455
  • 1
  • 6
  • 15
  • How can you have iframe width at 100% and then expect it to be centered? in the plunker the table above the iframe is at width 70% and setting the same on iFrame does the trick. Else you will change the contents of the iframe to be center of the iframe. – Nawed Khan Jun 28 '17 at 22:36

1 Answers1

3

You need to center the contents of what's in the iframe. To do that, one option would be to add margin: 0 auto; to the first child element of the .bk-root class.

Maybe adding

.bk-root > div {
  margin: 0 auto;
}

would do the trick. There are some classes being created dynamically in there so you might need to add an !important so its not overwritten.

The issue is that on large screens the width of the the iframe container goes to 100%. So if you're viewing it on a 1400px screen the iframe container element is 1400px in width.

The iframe is set to 100% width as well, so it also becomes 1400px in width.

But the content of the iframe has a max-width of 1000px, and is left-aligned. So it appears to be off to the left.

Another solution to fix this would be to set a max-width on the iframe container. This can be done with:

.box {
  max-width: 996px;
  margin:  0 auto;
}

in index.html. With this method you don't need to add the styling within the iframe.

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • I believe I have added this line but to no avail. If you would not mind checking the plunker again to see if I did it right then maybe you can advise on any further steps. – Abdall Jun 28 '17 at 23:17
  • I was able to add it via Chrome dev tools and it worked - but that may be because it adds the style in-line. That's why you might need to use `!important`. – Brett DeWoody Jun 28 '17 at 23:20
  • I can see in your iframe you have `bk-root.div {margin: 0 auto;}` which is not correct. It needs to be `.bk-root > div {margin: 0 auto;}` – Brett DeWoody Jun 28 '17 at 23:24
  • Thank. You. So. Much. I know there are limited characters here but can you in any way explain the syntax of what you did? I am a complete novice and this is a huge learning experience for me. – Abdall Jun 28 '17 at 23:27
  • also not too get too greedy but if there is any way that this is possible without altering the graphs.html then I would be ecstatic. But based off of your explanation I am assuming there is none? – Abdall Jun 28 '17 at 23:28
  • Updated to explain, and offer another solution that doesn't require adding CSS to graphs.html. – Brett DeWoody Jun 28 '17 at 23:38
  • Thank you! With the newly added answer the only downside is the iframe now requires a horizontal scrollbar but I can live with this. – Abdall Jun 28 '17 at 23:51
  • I think the iframe content has a slightly wider width than 1000px. you'll want to set the min-width of the `.box` element to whatever the width of the iframe content is. – Brett DeWoody Jun 28 '17 at 23:53