CODEWITHSUNDEEP
androidcsshtmlcordova
prateek
prateek

Reputation: 858

Horizontal scroll view in phonegap

In my phonegap app i want to implement horizontal scroll view. My html code

<div id="songsListPage" data-role="page">

    <div id="alphabets" > 
        <a href="#"  >#</a>
                    <a href="#" >A</a>
                    <a href="#"  >B</a>
                    <a href="#"  >C</a>
                    <a href="#"  >D</a>
                    <a href="#"  >E</a>
                    <a href="#"  >F</a>
                    <a href="#"  >G</a>
                    <a href="#"  >H</a>
                    <a href="#"  >I</a>
                    <a href="#"  >J</a>
                    <a href="#"  >K</a>
                    <a href="#"  >L</a>
                    <a href="#"  >M</a>
    </div>

<div id="songs_list" data-role="content"> <!-- this should not scroll, but it is and showing white background on right side -->

        <ul id="songsList" data-role="listview" data-theme="a"></ul> <!-- list is populated dynamically -->     

        <p>This is songs page</p>

        <a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
        </div>
</div>

my css 

#alphabets {
    background:#000000;
    display: block;
    padding: 5px;
    clear: both;
    height: 30px;
    margin-bottom: 22px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: 200%;
    overflow-x: auto;
}
#alphabets a{ color: #ffffff; margin-left: 5px}

by giving "width: 200%" and "overflow-x: auto" i'm getting horizontal scroll but the problem is my rest of the screen is also scrolling horizontally so is there is any way to achieve this ?

Upvotes: 2

Views: 7153

Answers (1)

TheBlackBenzKid
TheBlackBenzKid

Reputation: 27087

Old Answer

The New HTML

<div id="songsListPage" data-role="page">
<table id="alphabets"> <!-- change "div" tag to "table" tag -->
    <tr>
    <td href="#">#</td> <!-- and "a" to "td" tag -->
    <td href="#">A</td>
    <td href="#">B</td>
    <td href="#">C</td>
    <td href="#">D</td>
    <td href="#">E</td>
    <td href="#">F</td>
    <td href="#">G</td>
    <td href="#">H</td>
    <td href="#">I</td>
    <td href="#">J</td>
    <td href="#">K</td>
    <td href="#">L</td>
    <td href="#">M</td>
    <td href="#">N</td>
    <td href="#">O</td>
    <td href="#">P</td>
    <td href="#">Q</td>
    <td href="#">R</td>
    <td href="#">S</td>
    <td href="#">T</td>
    <td href="#">U</td>
    <td href="#">V</td>
    <td href="#">W</td>
    <td href="#">X</td>
    <td href="#">Y</td>
    <td href="#">Z</td>
    </tr>
</table>
<div id="songs_list" data-role="content">

<ul id="songsList" data-role="listview" data-theme="a"></ul>
<!-- list is populated dynamically -->     
<p>This is songs page</p>
<a href="player.html" id="playerBtn" data-role="button" class="ui-btn-active" ></a>
</div>
</div>

Updated CSS

#alphabets {
    background:#000000;
    display: block;
    padding: 5px;
    clear: both;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    width: auto;  <!-- changed width from 200% to auto -->
    overflow-x: auto;
}
#alphabets td{ color: #ffffff; font-size: large; 
margin-left: 5px; padding-left: 5px; padding-right: 5px;} 
<!-- rest of the changes in css are for proper view (UI) like height: auto; padding-left: 5px; (in td) etc -->

http://jsfiddle.net/CXAWE/ (for those who do not want a TABLE TR TD solution)

This will work perfectly in phone (android) browser. The Table TR works better for mobiles - it will and always has and continue to do so. I always use a TABLE for guaranteed results especially in this case.

Updated New Answer

HTML for any mobile solution.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Alternative to Mobile WAP and iPad/iPhone etc</title>
<!-- Mobile Web App Acceleration - Powered by WordCompress.net //-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all, handheld" />
</head>
<body>
<div id="b">
    <div id="content">
    </div>
</div>
</body>
</html>

CSS

body { overflow-x: hidden; }
#b {
    margin: 1px;
}
#content {
    background: none repeat scroll 0 0 #FFFFFF;
}

Notice viewport width is device-width and also notice that the body, has no width, and neither does the content. You can now guarantee that all phones will display 100%. You can change the overflow to y or x too.

Upvotes: 1

Related Questions