Setting Listview <li> Height in jQuery Mobile

Question

I am trying to resize <li> on my jQuery mobile site (listview) and cannot find a suitable class in CSS for this. I basically changed some elements (header and footer, etc.). I have five <li> buttons arranged vertically, and there is a space below the buttons and the footer.

I just want to set each height <li> 20% (this is a trick, as the five of them, and they are enclosed in a div body. Does anyone know of a class in jQuery Mobile CSS, which controls it? I can not find this information in the search.Here is a link to CSS for reference:

jQuery Mobile Default CSS

Thanks!

UPDATE

Initially, I meant discussing "listview" exclusively for buttons. I was too wide in my original explanation, but basically I'm trying to resize not all buttons, but just <li> s.

Answer 1

If you select classes, you can make your own decision on how to select LI elements, I would use the .ui-li class, and if you want to get only one listview element, then you can specify a more detailed selector:

 #my-listview-id > .ui-li { height : 20%; } 

Here is an example listview output from jQuery Mobile docs:

  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Overview</li> <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/intro.html" class="ui-link-inherit">Intro to jQuery Mobile</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li> <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/getting-started.html" class="ui-link-inherit">Quick start guide</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li> <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/features.html" class="ui-link-inherit">Features</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li> <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/accessibility.html" class="ui-link-inherit">Accessibility</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li> <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/platforms.html" class="ui-link-inherit">Supported platforms</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li> </ul> 

UPDATE

This was a bit more than what I previously posted, here is some kind of tested / working code:

 #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%; } 

Where #my-page is the identifier of my data-role="page" element, and #my-listview is the identifier of the data-role="listview" element.

Here is a demo version: http://jsfiddle.net/gu7WE/

Answer 2

.ui-btn is the class you should use. But the same class is used not only with the help of "buttons". Other jQuery Mobile components, such as listview , also use it. Therefore, if you set the .ui-btn you will also ruin these components. Therefore, to define a separate class is better, but for the five buttons, and then set for this class of height at 20% .

Answer 3

Why is it so complicated? And this would also work IMHO.

 #my-listview-id { height:100%; } #my-listview-id li { height: 20%; } 

Answer 4

It's simple:

 .ui-li>.ui-btn-inner { padding-top: 10px padding-bottom: 10px }