I have used listView on my page - but it coming on only 20% of the page I want to make it 80% - How to do this
Code:
<div>
<ul data-role="listview" >
<li>Contact Support
<ul data-role="listview">
<li>
Boston
<li>
New York
<li>
Miami
<ul data-role="listview">
<li>Safari for iOS </li>
<li>Android Browser </li>
<li>Firefox for Mobile </li>
<li>Opera </li>
</ul>
<li>
San Francisco
<li>
San Jose
</ul>
<li>Provide Feeback
<ul data-role="listview">
<li>Intro to Mobile Web
<ul data-role="listview">
<li>
WML and other oldies
<li>
XHTML MP
<li>
HTML 4.01
<li>
HTML5
</ul>
</ul>
<li>Notification Settings
<ul data-role="listview">
<li>
Safari for iOS
<li>
Android Browser
<li>
Firefox for Mobile
<li>
Opera
</ul>
<li>Log Out
<ul data-role="listview">
<button type="btnlogout">Log Out!</button>
</ul>
</ul>
</div>
dotnet_CH
Member
40 Points
256 Posts
height of the ListView in Jquery mobile
Jan 04, 2013 09:16 AM|LINK
Hi all,
I have used listView on my page - but it coming on only 20% of the page I want to make it 80% - How to do this
Code:
<div>
<ul data-role="listview" >
<li>Contact Support
<ul data-role="listview">
<li>
Boston
<li>
New York
<li>
Miami
<ul data-role="listview">
<li>Safari for iOS </li>
<li>Android Browser </li>
<li>Firefox for Mobile </li>
<li>Opera </li>
</ul>
<li>
San Francisco
<li>
San Jose
</ul>
<li>Provide Feeback
<ul data-role="listview">
<li>Intro to Mobile Web
<ul data-role="listview">
<li>
WML and other oldies
<li>
XHTML MP
<li>
HTML 4.01
<li>
HTML5
</ul>
</ul>
<li>Notification Settings
<ul data-role="listview">
<li>
Safari for iOS
<li>
Android Browser
<li>
Firefox for Mobile
<li>
Opera
</ul>
<li>Log Out
<ul data-role="listview">
<button type="btnlogout">Log Out!</button>
</ul>
</ul>
</div>
Thanks
DarrellNorto...
All-Star
86555 Points
9624 Posts
Moderator
MVP
Re: height of the ListView in Jquery mobile
Jan 04, 2013 09:37 AM|LINK
Add this to your CSS, the selector depends on the id in your data-role="page" tag:
#dataRolePageIdHere { height : 100%; margin : 0; padding : 0; }Darrell Norton's Blog
Please click "Mark as Answer" if this helped you.
Yousef_Jadal...
Star
8812 Points
1502 Posts
Re: height of the ListView in Jquery mobile
Jan 04, 2013 08:41 PM|LINK
Also you need to justify .ui-content :
Use somethink like this :
#my-page { height : 100%; margin : 0; padding : 0; } #my-page .ui-content, #my-listview { min-height : 100%; height : 100%; margin : 0; padding : 0; } #my-listview .ui-li { height : 20%; }Reference : http://stackoverflow.com/questions/8838212/setting-listview-li-height-in-jquery-mobile