iFrame to Fill div inside core-header-panel

1
votes

I recently started using Polymer to build a fluid material design website for myself, but I've run into some issues.

I'd like to have an iFrame that is dynamically loaded with various page's content inside of the core-header-panel, beneath the core-toolbar. The loading works, however, the iFrame will not fill the full height of the core-header-panel. I've tried setting its height to the height of the core-header-panel but that returned null. height=100% in both the tag itself AND in CSS don't work. I have no idea how I would get this to work, but I am open to an alternative solution aside from an iFrame. Width stretches fine, height doesn't scale. I believe I am using polymer 0.8 (just downloaded this morning).

enter image description here

Attached is the result with height set to 100%. Similar results are produced with every other method.

HTMLPastebin

JS for the site

cssPastebin

2
javascripthtmlcssiframepolymer
Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on Stack Overflow. See "Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?. BTW, it's "Thanks in advance", not "Thanks in advanced". - John Saunders

2 Answers

1
votes

Looks to be that for some reason you are having a problem with !DOCTYPE. to test this... in the doctype tag. Try just using something like this !DOCTYPE html5. You will then have control of height.

I don't use Polymer so you will need to still find out why the Doctype is giving you this issue. So you can use the correct !Doctype.

But this will hopefully get you on the right path to correct the problem.

1
votes

Try to use layout attribute like explain on Polymer layout documentation

There are some attribute that you can use like fit, or horizontal. Probably like below

<div class="content" horizontal layout>
            <iframe height="100%" frameborder="0" width="100%"></iframe>
</div>