www.webdeveloper.com
Results 1 to 5 of 5

Thread: Flexible design and iframe height

  1. #1
    Join Date
    Nov 2012
    Posts
    3

    Flexible design and iframe height

    Hi guys,

    First post here
    I'm looking for a solution to a problem I've been trying to fix for ages and I can't figure it out for the life of me.

    I have a flexible design and I use the @media property to adapt the content to all devices, esp tablets and mobiles.

    Problem is, I have to use iFrames to use some custom forms from Wufoo.com. As much as I hate frames, I'm legally required to use those so I don't have a choice.

    So anyway my iFrames' content width is defined to 100%, and their height to the number of pixels of the actual page being framed. Everything works fine on desktop browsers.

    The problem is that when people reduce the browser width or view the site from a mobile phone, the iframes are cut off at the bottom and a lot of the content is missing.
    The height basically changes as you resize the width of the page.
    Now I've tried to javascripts i found online and stuff, nothing works. I've defined the min-height: to the same number of pixels as the forms, that doesn't work. I've tried overflow:visible; and that doesn't work as well.
    I think this just can't be fixed in CSS...

    Do you guys know a fix for this?

    Thanks in advance...

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    Did you try adding scrolling="auto" to the <iframe> tag?

    I think it's going to be difficult to find an elegant solution in any case, so you'll probably have to settle for some kind of compromise. While it may be possible for JavaScript to calculate the required height for your <iframe> after a resize event, it would require at least one additional redrawing of the page. On a mobile browser that's going to feel pretty slow and a bit ugly even on a tablet. All you can do in these cases is try to find a reasonable solution.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    871
    I do have to kind of wonder if you have any code or an example/link so that it'd be a little easier to help resolve your issue. Personally I haven't messed with 'responsive frames' (if there is such a thing) but I do wonder if they would work like responsive video or images. I wouldn't rule out CSS as it's very well suited for fluid and responsive control of your webpage's design and its elements. But of course if not then javascript should have no trouble providing a solution, again it would just help to be able to see what you are getting so I can help come up with a solution for what you want.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  4. #4
    Join Date
    Nov 2012
    Posts
    3
    Thanks for your replies guys. Sup3rkirby, while I appreciate that you'd like to have a look directly at the page, I unfortunately I can't post the link publicly as it is a corporate website I am working on and it won't go live for a while.

    These iframe requirements are a nightmare. And I do agree that JS would be a heavy solution for mobile devices. Not to mention that there is a still a tiny percentage of people out there who have JS deactivated for security reasons. The goal is to have that website look and feel the exact same way for everyone, and I have to consider all devices, standards, browsers, etc.

    I did find a little trick in the meantime which consists of redefining the min-height of each iframe with CSS which seems to work, depending on the screen width like so:

    Code:
    @media only screen and (max-width:640px){
        iframe{min-height: 2000px;}
    }
    @media only screen and (max-width:480px){
        iframe{min-height: 2000px;}
    }
    For lack of a better solution, I think I'll go with that for now...

  5. #5
    Join Date
    Nov 2012
    Posts
    3
    Forgot to mention that I did try auto scrolling and it worked fine, but is not an option for design reasons - it's just really ugly!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles