How to make an iframe inside of a div scrollable on an Ipad

How to make an iframe inside of a div scrollable on an Ipad

Rule #1 – Never use iframes. But if you must use iframes, find out how to make them scrollable with this article.

When I first encountered this debacle, the answer wasn’t as easy to find as I had hoped.

Everything was working fine on desktop. I had used Bootstrap to assist with the cross platform optimisation and was expecting minor issues at best when loading my site on tablet for the first time.

My tablet, however, had other ideas. My iframes inside my div based layout where not scrolling. And so the tale begins.

I found this to be a problem on Ipads, Androids seemed to handle the iframe perfectly.┬áSo eventually after what felt like years of struggling – please pardon my sometimes hyperbolic nature – lo and behold I finally had an answer. Here it is:

How to make an iframe inside of a div scrollable on tablet / Ipad

Your parent div needs to have the following css attributes assigned to it:

-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;

Here’s an example:

div {
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
    height:800px;
    width:100%;
}

iframe {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
<div>
    <iframe>Your Iframe</iframe>
</div>

I’ve included the !important statement in case you have any other css that could potentially override this code. If you are sure you don’t need it, you may remove it.

This also works on other troublesome elements that you require to be scrollable.

How to make your iframe inside of a div scrollable without adding extra scrollbars to the desktop version

Maybe you’re not into all the scrollbars that this solution can cause? Try adding some Jquery into the mix to add the css only when necessary. After all, tablets don’t really possess the same scrollbar related issues that desktops do.

$("body").on('touchstart', function () {
        $("div").addClass("tablet");
});
.tablet {
    -webkit-overflow-scrolling: touch !important;
    overflow: scroll !important;
}

div {
    height:800px;
    width:100%;
}

iframe {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
<div>
    <iframe>Your Iframe</iframe>
</div>

Don’t forget to add your link to the jquery library for this to work.

This piece of code will add the class of tablet to the div on the tablet touch event. Bye bye scrollbars.

Dialog popups inside of Iframes

Dialogs are another huge problem when it comes to using iframes on smaller devices. They never pop to the center of the screen. Ugh, right?

Use your dialogs via their parent frame – which I’m assuming is not an iframe. If you really hate yourself, use iframes inside iframes and try to navigate via tablet devices.

Access the parent div using this nifty trick.

$('#parentDiv', window.parent.document).html();

What if you need to access an element within your iframe? No problem.

$('iframe').contents().find('#idElementInsideIframe');

Another cross platform optimisation tip for the road

Are you having trouble with initial screen width sizes from one device to the next?

It could be that you are utilising the wrong meta codes.

Our textbooks teach us to add the following for our meta tags in order to get our media devices to resize correctly:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

If you are still having some quirks with your site not sizing correctly, try making one small change to line 2.

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1">

By excluding the “width=device-width” you allow the device to set the width to its default by using the initial scale exclusively.

 

 

 

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *