SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iFrames and responsive design

    Just a quick question - I have a couple of different iFrames (containing external content) within a responsive layout and am wondering how do I get around the problem of the iFrame not scrolling/interacting in the mobile/tablet breakpoint?
    Example link

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you mean the actual content inside the iframe then you can't change that content as it doesn't belong to you

    The only way to change the style of the html in an iframe is by adjusting the css in the page that the html belongs to. An iframe is basically a window that lets you see outside your site. You can't change the view by changing the window.

    If the iframe content is hosted on your own site and you have access to the css then you would need to design the page in a responsive manner so that it fits the viewport accordingly.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    If you mean the actual content inside the iframe then you can't change that content as it doesn't belong to you

    The only way to change the style of the html in an iframe is by adjusting the css in the page that the html belongs to. An iframe is basically a window that lets you see outside your site. You can't change the view by changing the window.

    If the iframe content is hosted on your own site and you have access to the css then you would need to design the page in a responsive manner so that it fits the viewport accordingly.
    Hi Paul,
    Sorry I think I may not have been clear in my question - I am aware that the content in the iFrame belongs to a third party, what I meant was when you view the page on a mobile screen - the iFrame scrollbars are not visible and therefore the user can not even scroll the content within the iFrame left/right/up/down. Is there something I can do so they can? Thx.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    ikandee, when I reduce the size of my desktop screen to mobile size, the iframe's scrollbars are still present. Is this what you see, also? In which mobile devices are the scrollbars not visible?

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    ikandee, when I reduce the size of my desktop screen to mobile size, the iframe's scrollbars are still present. Is this what you see, also? In which mobile devices are the scrollbars not visible?
    It seems to be happening on the iPhone and iPads... (blackberry and andriod are ok)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As far as I know the iphone doesn't show scrollbars on any internal elements and to scroll inside an overflow div you need to use a two finger swipe. There is a script called iscroll which should address the issue although I;ve never used it.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    As far as I know the iphone doesn't show scrollbars on any internal elements and to scroll inside an overflow div you need to use a two finger swipe. There is a script called iscroll which should address the issue although I;ve never used it.
    Hi Paul - thanks I will take a look through it.


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
  •