CODEWITHSUNDEEP
jqueryhtmljquery-mobilecordova
Beginner
Beginner

Reputation: 1424

double vertical scroll bar in jquery mobile page

I have a page in which i have a fixed header and fixed footer and i have list in the content and i am appending dynamically data to the listview.

html

<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1> list header </list>
    </div>
    <div data-role="content" class="listscroll">
        <div id="list"></div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1> list footer </list>
    </div>
</div>

JS

var k = '<ul data-role="listview">';
for (i = 0; i < 5; i++) {
    k += '<li><div style="height:80%;"><a href="#quoteList_detailPage" data-role="none"><img src="http://www.jucoolimages.com/images/quotes/quotes_18.gif" width="100%"height="80px"></a></div></li>';
    k += '<div style="height:105px;text-shadow:none;" id="' + i + '">' +
        '<div style="height:80%;"><a href="#" data-role="none" data-transition="slide"><img src="http://www.jucoolimages.com/images/quotes/quotes_18.gif" width="100%"height="80px"></a>' +
        '</div></div>';
}
k += '</ul>';

$('#list').html(k);
$('#list ul').listview();

CSS

.listscroll {
    overflow-y: scroll;
    max-height: 336px;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

but the page that loads has two vertical scrollbars: The inner one is slightly larger than the page, and the outer one is the length of the page.

How can i remove the outer scrollbar?

Thanks:)

Upvotes: 0

Views: 2917

Answers (1)

ackfloverstow
ackfloverstow

Reputation: 81

You should refer to this solution:

< Double scroll bars when using the Panels of jQuery Mobile 1.3 in ASP.NET MVC 4 >

I believe something like this will resolve the issue:

<link rel="stylesheet" href="themes/CUSTOM.min.css" />   
<link rel="stylesheet" href="jquery.mobile.structure-1.3.0.min.css"/>

Upvotes: 1

Related Questions