Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts

    CSS overflow:hidden doesn't work on Apple's iPhone - Safari device?

    Hello,
    Sorry if I've posted in the wrong section.

    I have been looking and testing for a simple CSS solution for this issue for 3 days, but still w/o any luck. Some said I have to use position:relative, but it won't work either. Anybody kind enough to give me any hints/ some suggestion,... please

    Below is an example code for one page. Basically there's some text within text class <div> and I need them to be inside this <div>, always. So I use CSS rule overflow:hidden to achieve this and it works beautifully on my FF12, IE8, Safari5, Chrome19 and Opera11. However, someone told me that this long text had spilled over its container <div>, on his iPhone device.

    N.B. text scrolling is provided by up and down links, hooked using jQuery's click() handlers, but I don't think this is related to the problem.


    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>using overflow:hidden in iPad/iPhone devices</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    style type="text/css">
    .
    clearFloats{
        
    displayblock !important;
        
    floatnone !important;
        
    clearboth !important;
        
    width0px !important;
        
    height0px !important;
        
    padding0px !important;
    }

    .
    dynamic{
        
    width500px;
        
    height150px;
        
    background-colorlightblue;
    }
    .
    dynamic img{
        
    displayblock;
        
    floatleft;
    }
    .
    dynamic > .text{
        
    background-colorlightgreen;
        
    font-weightbold;
        
    floatright;
        
    width350px;
        
    height100%;
        
    overflowhidden;
        
    /* position: relative; */
    }

    .
    scroller{
        
    background-colorlightgray;
        
    width60px;
    }
    .
    scroller a{
        
    floatleft;
    }
    .
    scroller a:first-child a{
        
    floatright;
    }
    </
    style>

    <
    script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.scroller > a:first-child')
            .click(function(){
                var scrolledWrapper = $('.dynamic > .text');
                scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() - 9);
                return false;
            })
            .next().click(function(){
                var scrolledWrapper = $('.dynamic > .text');
                scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() + 9);
                return false;
            });
    });
    </script>

    </head>
    <body>
    <div class="page">
        <div class="dynamic">
        
            <img src="sheep-and-sheep-dog.jpg" 
                alt="http://www.public-domain-image.com/animals/dog/slides/sheep-and-sheep-dog.html" />
                
            <div class="text">
            
                <p>Courtesy of <a href="http://www.public-domain-image.com" target="_blank">public-domain-image.com</a></p>
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus dictum neque eu facilisis. </p>
                
                <p>Proin ut sapien lorem, eget accumsan dui. Quisque at ultrices massa. Nunc enim nibh, condimentum sed semper vel, </p>
                
                <p>viverra eu diam. Donec ac lectus vel mi consectetur molestie. Quisque vitae malesuada neque. </p>
                
            </div>
            
            <div class="clearFloats"></div>
            
        </div>
        
        <div class="scroller">
            <a href="#">up</a>
            <a href="#">down</a>
            <span class="clearFloats"></span>
        </div>

    </div>

    </body>
    </html> 
    A link to above example: http://bit.ly/Mr5Iac

    Thanks,
    Hendra
    Last edited by hdewantara; 06-05-2012 at 12:32 PM.

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts
    Dear Mods,

    Am I allowed to link this thread to Codingforums' HTML & CSS sub? I would like CSS experts there to also see this issue and invite them to help me...

    THanks,
    Hendra

  • #3
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts
    Okay I cancel that, I understand that it would be considered a double-posts.
    But would somebody please spare sometime to help me?

    Or maybe a re-phrase to the question:
    If iPhone couldn't recognize "overflow:hidden" style property of div, what should I use to properly make the content of a div (on iPhone) doesn't spill over its container?

    Safari's reference hasn't mention this property quite explicitly:
    https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1


    Please help,
    Hendra

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts
    Okay I cancel that, I understand that it would be considered a double-posts.
    But would somebody please spare sometime to help me?

    Or maybe a re-phrase to the question:
    If iPhone couldn't recognize "overflow:hidden" style property of div, what should I use to properly make the text content of a div (on iPhone) doesn't spill over its container?

    Safari's reference hasn't mention this property quite explicitly:
    https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW1


    Please help,
    Hendra

  • #5
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Your "link to above sample" does not work.

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts
    Sorry Steve,
    this has been months ago, so I had to remove it.

    The actual test is http://smokingscript.com/test/iphone_overflow/, but I have compacted it a bit, to simplify the view:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>using overflow:hidden in iPad/iPhone devices</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    style type="text/css">
    .
    clearFloats{
        
    displayblock !important;
        
    floatnone !important;
        
    clearboth !important;
        
    width0px !important;
        
    height0px !important;
        
    padding0px !important;
    }
    .
    page{
        
    width400px;
        
    height150px;
        
    border-colorblack;
        
    border-stylesolid;
    }
    .
    page img{
        
    displayblock;
        
    floatleft;
    }
    .
    page > .text{
        
    background-colorLightGray;
        
    floatright;
        
    width250px;
        
    height100%;
        
    overflowhidden;
        
    /* position: relative; */
    }
    .
    scroller a{
        
    text-decorationnone;
        
    background-colorLightGray;
        
    border-styleoutset;
        
    padding0px 10px;
    }
    </
    style>

    <
    script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.scroller > a:first-child')
            .click(function(){
                var scrolledWrapper = $('.page > .text');
                scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() - 9);
                return false;
            })
            .next().click(function(){
                var scrolledWrapper = $('.page > .text');
                scrolledWrapper.scrollTop(scrolledWrapper.scrollTop() + 9);
                return false;
            });
    });
    </script>

    </head>
    <body>

        <div class="page">
            <img src="sheep-and-sheep-dog.jpg" 
                alt="http://www.public-domain-image.com/animals/dog/slides/sheep-and-sheep-dog.html, 
                Courtesy of public-domain-image.com" />
            <div class="text">
                <p>Click the 'up' or 'down' buttons below, to scroll me...</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus dictum neque eu facilisis.</p>
                <p>Proin ut sapien lorem, eget accumsan dui. Quisque at ultrices massa.</p>
                <p>Nunc enim nibh, condimentum sed semper vel, viverra eu diam.</p>
                <p>Donec ac lectus vel mi consectetur molestie. Quisque vitae malesuada neque.</p></div>
            <div class="clearFloats"></div>
        </div>
        
        <div class="scroller">
            <a href="#">up</a>
            <a href="#">down</a>
        </div>
        
    </body>
    </html> 
    This page looks okay on all of my desktop browsers, my (emulated) Android, and (emulated) Opera Mobiles, and so no spill-over problems on them. I don't know about iPhones though.

    The problem might have been resolved, since I have never again hear any complaints about my work (related to this demo). However, I have large doubt which actually have solved the overflow:hidden issue...
    • My client has upgraded this iOS to version 5.
    • the CSS for .page > .text{} ought to have fixed height, not in percentage.


    Thanks,
    Hendra

  • #7
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    OK, here's some feedback for you.

    Overflow hidden works fine in the iPhone; however, it isn't optimized for the display size (it's too tiny and I had to drag it larger). Also, one must tap on the down button twice to reveal a line of text, so it is slow to use.

  • Users who have thanked StevenHu for this post:

    hdewantara (12-14-2012)

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    329
    Thanks
    9
    Thanked 49 Times in 48 Posts
    Thanks for your feedback, Steve.
    It is not easy to get one, especially in this Building for mobiles category

    And yes, I have ripped every mobile-optimization for that page so we could focus only on the overflow

  • #9
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    That's what I figured!


  •  

    Tags for this Thread

    Posting Permissions

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