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
    416
    Thanks
    10
    Thanked 61 Times in 60 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
    416
    Thanks
    10
    Thanked 61 Times in 60 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
    416
    Thanks
    10
    Thanked 61 Times in 60 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
    416
    Thanks
    10
    Thanked 61 Times in 60 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
    416
    Thanks
    10
    Thanked 61 Times in 60 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
    416
    Thanks
    10
    Thanked 61 Times in 60 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
    •