Posted by billp44ruby on January 28, 2013 at 12:35am
I'm creating web content that will be integrated into a website via iframe. I'm using the Omega theme so that the content is device responsive. I'd like the content to expand to fill the size of the iframe, but the page being delivered always keeps the empty side margins of the page intact instead of eliminating them and filling the frame with the actual content. So how do I get rid of the margins and so that the page fills the iframe area more tightly?
Comments
Re: Omega Page margins in an iframe
@billp44ruby
This sounds more of an issue having to do with the iframe property, and not what is happening within any part of Drupal core or your particular installation.
A good place to check is the W3C spec at www.w3.org/wiki/HTML/Elements/iframe.
I don't believe that's the case
When I iframe a basic page, I get nothing outside of the page margin. For example, I'm transitioning from a 720px wide page to an Omega responsive theme with variable widths. When I iframe the 720px page, I get nothing outside of the page borders. When I'm doing it with the Omega them, I'm getting areas outside of the grid appearing in the iframe. How do I get rid of the non-grid space?
A similar and I suspect related issue would be in being able to set a background-color and border just for the area inside of the grid. When I assign a background color and border to the #page id, it expands outside of the grid. Finding how to get this border around just the grid content would likely provide a clue or solution for the iframe issue.
Possible solution
Hi Bill,
I'm not exactly sure what you're asking, but if I understand you correctly I may have something that could be of help. I wrote a post on responsive video, which when you get the code from YouTube or Vimeo, comes in an iframe. Here's the post:
http://friendlymachine.net/posts/2012/responsive-embedded-video
So the idea is that you have to make your video/iframe responsive. You need to get rid of the height/width attributes on the iframe and then add a little CSS to the container and you're all set. See if the post helps point you in the right direction.
If so, there are jQuery solutions out there that may be easier over the long run.
John
John Hannah
Friendly Machine
Thanks, that was helpful
In addition to using this method, the other thing I discovered is that I'll probably have to adjust the default responsive breakpoint widths for narrow, normal and wide layouts to work within the target iframe environments. As an example, if I have an iframe that is 800px wide, but responsive breakpoints of 980px and 740px, the page loaded will have a great deal of 'outside the grid' space. Setting a breakpoint of 820px will eliminate much of what I'm trying to get rid of, I think.
Thanks for your help.