Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PhoneGap/Cordova: Prevent horizontal scrolling

I have an app built on Cordova and on some of my pages I am able to scroll horizontally out of my content into white space.

This is weird as I have nothing there that extends beyond my #wrapper, which is set to width: 100%.

So I was wondering if there was a way I could disable horizontal scrolling in the app altogether?

UPDATE:

Code on page as requested:

body {
    background-color: #fff;
    font-family:Arial, Helvetica, sans-serif;
    color: #b7b8b9;
    height: 100%;
    width: 100%;
}

iframe{
    border: none;
    width: 100%;
    /*margin-top: 50px;*/


   }

#header{
    height: 50px;
    width: 100%;
}


<body>
         <div id="wrapper">
        <div id="header">
            <div class="headerback"><a href="index.html">Home</a></div>
            <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div>
            <div class="headertitle"><h2>Get the Look</h2></div>

        </div><!--HEADER-->
    <iframe src="http://www.mbff.com.au/getthelook"></iframe>
    </div>
    </body>

This is what happens on horizontal scroll

like image 890
MeltingDog Avatar asked Jun 26 '12 02:06

MeltingDog


3 Answers

Try to debug your page in Chrome (webkit) with the exact dimensions of your device. This solves most rendering issues for me.

I do not know the specific issue here, but it looks like one of your elements is flowing outside of the wrapper. You could for example try this in your css:

div.wrapper { overflow: hidden; width: inherit; }

Although it might be a better idea to find out why your page is expanding horizontally?

like image 107
Justus Romijn Avatar answered Nov 04 '22 01:11

Justus Romijn


I was looking for the solution to this problem for a long time. Finally I solved it in the following way. I set style for bodyand html tags:

position: fixed;
width: 100%;
height: 100%;
overflow: hidden;

After that I've added div to body and set the style for it:

overflow-y: auto;
height: 100%;

So, I have got fixed body, which contains div with vertical scroll bar.

like image 6

// Phone Gap disable only horizontal scrolling in Android.

// Add this code in your Phone Gap  Main Activity.Initially Declare the variable 

private float m_downX;

//Then add this code after loadUrl

this.appView.setOnTouchListener(new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                // save the x
                m_downX = event.getX();
            }
            break;

            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP: {
                // set x so that it doesn't move
                event.setLocation(m_downX, event.getY());
            }
            break;
        }
        return false;
    }
});
like image 4
Ganesh karthik Avatar answered Nov 04 '22 00:11

Ganesh karthik