Results 1 to 8 of 8

Thread: Cross-browser Iframe Height

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Cross-browser Iframe Height

    I have a Google form embedded into my blog:
    http://tmblrlabs.tumblr.com/contact
    Simplified demo:
    https://jsfiddle.net/kexgcd0a/

    It looks ideal on Chrome — neither an extra scrollbar nor unwanted space below the iframe. But that's not true for other browsers, e.g. in Firefox there's an extra scrollbar. What should I do so it looks good on all browsers?
    Last edited by Rain Lover; 03-30-2015 at 09:41 AM.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    Change the iframe's height:
    Code:
    <iframe src="https://docs.google.com/forms/d/1QICJwSJNEjSAGaVz7mWxq0FnrfDMZqOqMn0_iXM0ph8/viewform?embedded=true" style="width: 100%; height: 655px; border: 0; " ></iframe>

  3. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by molendijk View Post
    Change the iframe's height:
    Code:
    <iframe src="https://docs.google.com/forms/d/1QICJwSJNEjSAGaVz7mWxq0FnrfDMZqOqMn0_iXM0ph8/viewform?embedded=true" style="width: 100%; height: 655px; border: 0; " ></iframe>
    That leaves unwanted space below the iframe in Chrome and some other browsers.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    As long as there's enough space to show the contents, what about adding scrolling="no" to the iframe tag?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    As long as there's enough space to show the contents, what about adding scrolling="no" to the iframe tag?
    The point is enough space differs from browser to browser. In addition, Google might change the form style and size in the future, which is out of my control.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    In addition, Google might change the form style and size in the future, which is out of my control
    True, but then using a fixed height (as you currently are) will create the same limitations.

    These are some ideas;

    1 - Use "browser hacks" - CSS or JS - to target the browsers and provide specific heights for each (but then, like you say, you can't control what Google will do with their form in the future, so you'll have to keep an eye on things and edit the height again when necessary - nothing you wouldn't already be doing though with your existing CSS height)

    2 - Use an iframe auto height script - there are plugins for jQuery and I believe there is one in the DD library too (having never used a tumblr blog, I don't know if you are able to use 3rd party scripts though)

    3 - Set a big enough iframe height (with or without scrolling="no" too) so that the content can be seen using today's Google form layout, and accept that browsers render things slightly differently (additional thoughts as point 1)

    4 - Use your own form rather than Google's so that you can control layout (don't know if this is possible with tumblr)

    5 - Set up your own blog, on your own web host, and be in control of everything.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    Rain Lover (03-31-2015)

  8. #7
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

  9. #8
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    How about this?
    http://jsfiddle.net/60xs8bro/http://jsfiddle.net/60xs8bro/

    html
    Code:
    <iframe src="http://www.cnn.com/" class="iframe"></iframe>

    css
    Code:
    html, body
    {
        height: 100%;
        overflow: hidden;
    }
    .iframe
    {
        position:absolute;
        top:-70px;
        left:0;
        width:100%;
        height:calc(100% + 70px);
    }

Similar Threads

  1. Replies: 0
    Last Post: 12-14-2010, 04:20 PM
  2. Cross-browser iframe url replace
    By baka in forum JavaScript
    Replies: 5
    Last Post: 06-26-2008, 08:07 AM
  3. Replies: 2
    Last Post: 11-04-2007, 06:21 PM
  4. Cross Browser marquee II, from inside Iframe
    By tomkure in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-05-2007, 06:14 AM
  5. Replies: 6
    Last Post: 07-06-2006, 12:59 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •