Iframe Horizontal Scrolling Not Rendering on iOS

iframe horizontal scrolling not rendering on iOS

A better way to do this would be to use a div. I tested out your code and iframes do not seem to allow horizontal scrolling at all.

Unless you need to get the content from an external page (as that's what iframes are for), this should work:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<div id="framecont" style="background-color:red; height: 200px; width: 200px; overflow: auto; -webkit-overflow-scrolling:touch;">
<div class="inside" style="background-color:blue; width: 400px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus tempus enim, ut ornare enim aliquet et. Nunc porta porttitor dolor, ut pharetra augue venenatis et. Ut felis diam, consectetur a viverra a, auctor vel lorem. Ut tempor magna eget sem faucibus adipiscing condimentum ipsum tincidunt. Sed aliquam venenatis enim ut dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing ullamcorper tincidunt. Etiam fermentum arcu quis mi malesuada eget varius lorem convallis.
</div>
</div>

The viewport is set (I only included this because I had it on my test page) so that page scrolling is disabled. The #framecont div is like a container, with a set width and height. The inside div, .inside, acts as the direct container to the content. The width is set to a greater width than the parent div, so that it will scroll horizontally so you can see the rest of what's in the div.

You do not need to set the height of the second div as it will fill 100%. You could for instance, set the second div to a width of 1000px, if that's how long you wanted the content to scroll to, and then you would be able to scroll that amount.

Mobile Site: Lack of horizontal scrolling on iPhone

For the Youtube video, is quite simple. In the iframe, add the following css style to it:

<style type="text/css">
    iframe.someClass {
        width:100%;
        max-width:NNNpx;
    }
</style>

Where NNN is the max width you want the iframe to have, normally the container of the desktop version or even some size you want.

With this code, the width of the iframe will be 100% of it's container, unless the container is bigger than the max-width size you've setup. If it's bigger, the max-width will take place.

This will cover most of the problems and ensure the width is always the maximum the container can have, when screen size is smaller than the max-width value.

For the horizontal scrolling issue:
iOS' Mobile Safari normally stretches all elements with overflow:auto since it does not allow scrollbars in ANY way. The same would apply for a frameset for e.g. You can't have a fixed part and a scrolling part, because MSafari stretched both so all elements of each are visible.

Since your container have overflow:hidden, the snippet is stretched but hidden due this CSS property.

The only way to actually simulate scrollbars is by using some javascript framework. The best one is Cubiq's iScroll 4 ( http://cubiq.org/iscroll-4 ) that have support to multiple touch events and other nice options.

This way, you can make the code snippets to accept touch events and then be scrolled horizontal, vertically or both.

The most common usage is:

<script charset="utf-8" type="text/javascript">
    var myScroll = new iScroll('idOfWrapper', {
            //various options
    });
</script>

Since you got lots of snippets (using the example you gave), you could apply some kind of loop for each of them, using a jQuery.each().

Let's make an example.
Using jQuery and iScroll, you could make the following:

HTML:

<html><head>
<title>Test</title>
<!-- include jquery and iscroll -->
</head><body>

<div id="divPretendingIsDeviceScreen" style="max-width:320px;overflow:hidden;">
    <h1>Header</h1>
    Lorem ipsum dolor sit amet.
    <br/><br/>
    <h2>Another header</h2>
    For example:<br/>
    <br/>
    <div class="divToBeScrolled">
    <pre>
    //This is a single-line comment
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    </pre>
    </div>
    <h2>Our first C++ program</h2>

    <div class="divToBeScrolled">
    <pre>
    /*
    This is a multi-line comment.
    It can have multiple lines!
    */
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test

    /*making
    vertical
    scroll
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    making
    vertical
    scroll
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    making
    vertical
    scroll
    //one bigger line to test one bigger line to test one bigger line to test one bigger line to test
    */
    </pre>
    </div>
    <br/>
    <br/>
    Lorem ipsum dolor sit amet.
</div>
</body></html>

CSS:

<style type="text/css">
    .scrollerType {
        overflow:hidden;
        max-height:200px;
        /* put max height you want the scroller div to have, 
        normally less than the device's window size, like 200px or so so.*/
    }

    div.divToBeScrolled {
        overflow:scroll;
        display:inline-block;
        white-space:pre-wrap;
    }
</style>

JS/jQUERY:

<script charset="utf-8" type="text/javascript">
    var snippetName = new Array(); //creates a new array to make the var names for iscroll
    var selfId = new Array(); //creates a new array to make the names for the scrollers

    $('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter
        selfId[index] = 'scrollerId'+index; //creating a new id name for the container
        $(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container
        var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly
            snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId
                //here you declare various options - see "Passing parameters to the iScroll" at iScroll page
                //this is the best set, i think
                snap: false,
                momentum: true,
                hScrollbar: false,
                vScrollbar: false,
                hScroll: true,
                vScroll: true,
                desktopCompatibility:true
            }); //end new iScroll
        },100); //100ms just bc 0ms or 1ms might not be enough

    }); //end .each
</script>

Since we need the iscrolls to take effect after the snippet highlighter has taken place, we can wrap the above code in a js function and add it as callback function at the snippet highlighter when it is done with the colors.

I think this will works. Made it now but the idea is right.
Will test tonight and make the fixes if needed by editing the answer.

Well, i think that's it, feel free to ask if you don't understood a thing.

_*EDIT:*_

Fixed the JS code, added the codes for CSS and an the test-case HTML.

I've made a test-case

( http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html )

Iframe not loading fully within horizontal scrolling Div

You have a max-width: 100% on that iframe somewhere which messes your things up.

Try removing it or, overriding by setting it to default which is max-width: 0

Can't scroll iframe on mobile iOS Safari

Take care of the position Attribute.

<iframe src="www.website.com/" style="position:absolute; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>

I set the position to "absolute" and it has fixed it.

*also play with those attributes:

scrolling="no" (or "yes", depends on your need)

overflow: scroll; (or instead of "scroll", use one of those: visible|hidden|auto|initial|inherit;)

Iframe Horizontal Scrolling Not Rendering on iOS