CODEWITHSUNDEEP
htmlioscsstwitter-bootstrap-3
brianfit
brianfit

Reputation: 1919

Bootstrap page Overflow-x hidden, one element on page on IOS still scrolls left and right

I want my cordova app to look less like a web app and more like a real app by eliminating left and right scroll.

I've set the overflow-x property to hidden on the html and body tags, and that works for all but the page below, which scrolls left and right but shouldn't.

Have I misconstructed the grid? I've tried to apply the "overlow-x: hidden" property to an enclosing div instead of the body and html as suggested elsewhere, tried applying the property to the individual divs, attempted limiting width on the divs. I've tried changing the html position to fixed (which fixes the left-right scroll but also stops up down which I need). You can view the page below on an iOS device to see the behaviour here. Which of my lousy skillsets -- css, html, or bootstrap -- is letting me down here?

    <!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
    <head>
        <meta charset="utf-8" /> 
        <title>
            My Awesome Title
        </title>
        <meta name="generator" content="BBEdit 11.0" /> 

        <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css"> 
        <script type="text/javascript" src="scripts/jquery-2.0.3.min.js">
        </script>
        <script type="text/javascript" src="scripts/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="scripts/bootbox.min.js">
        </script>
        <style>
            html, body {
            overflow-x: hidden !important;
            }
        </style>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' /> 
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;">
                    <h2 class="text-center">
                        My Awesome Title
                    </h2>
                    <br /> 
                    <div id="hexpix" class="center-block">
                        <br /><br /> 
                        <div id="hexpixdiv">
                        </div>
                    </div>
<!-- Alert Space -->
                    <div id="AlertSpace" class="center-block" style="text-align:center; width:75%">
                    </div>
                    <br /> 
<!-- Hex Content Space for text  -->
                    <div id="hexindex" class="text-center">
                    </div>
<!-- hexindex close -->
                    <div id="hexcontent" class="text-center">
                    <!-- 
    <p>
                            Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
                            <p>
 -->

                    </div>
<!-- hexcontent close -->
                    <div id='HelpButton'>
                    </div>
                </div>
<!-- Column class close-->
            </div>
<!-- Row class close-->
            <br /> 
        </div>
<!--Container close-->
        <div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;">
            <div class="row">
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Reddit">
                        <span>
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="SMS">
                        <span class="icon-export">
                        </span>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Email">
                        <span class="icon-gmail">
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Twitter">
                        <span class="icon-twitter">
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Facebook">
                        <span class="icon-facebook">
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="tumblr">
                        <span>
                        </span>
                    </a>
                </div>
            </div>
<!-- Row -->
        </div>
<!-- Sharestrip -->
        <div id="footer" style="position: absolute;
  bottom: 0;
  width: 100%;  height: 20px;">
<!-- See hex.css for custom css on this -->
            <div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-3 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-2 text-center">
                            <a href="javascript:void(0)" 
                            <span class="nav-link">
                                1
                            </span>
                            </a>
                        </div>
                        <div class="col-xs-2 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                    2
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-2 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                    3
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-3 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                </span>
                            </a>
                        </div>
                    </div>
<!-- End Row -->
                </div>
<!-- End Container -->
            </div>
<!-- End Navbar -->
        </div>
<!-- End Footer -->
    </body>
</html>

Upvotes: 0

Views: 13349

Answers (1)

Dariusz Sikorski
Dariusz Sikorski

Reputation: 4407

When you set overflow: hidden to element it doesn't mean it stops to be scrollable... it just hides the scrollbar. Since mobile devices scroll contents when touching anywhere on the element, it just remains scrollable.

The fact is - your website is scrollable on X-Axis even on desktop devices, you just hide it by using overflow-x: hidden on body tag.

The reason why your website is x-scrollable on all devices is that you forgot to add class="container" to <div id="sharestrip"... and the row inside it has 100%+15px(left margin)+15px(right margin) which is bigger than window width.

This behaviour is reduced by .container by it's padding-left: 15px and padding-right: 15px, so simply you need to remember of adding class="container" to parent of the row.

Upvotes: 1

Related Questions