Setting Listview Height in jQuery Mobile

Question

I'm trying to resize the <li>s in my jQuery mobile site (listview) and can't seem to find the right class in CSS to do it. I've basically resized some of the elements (the header and footer, etc.). I have five <li> buttons stacked vertically and there is a gap below the buttons and the footer.

I just want to set each <li>'s height to 20% (that would do the trick since there is five of them and they are nested in a body content div. Does anyone know the class in the jQuery Mobile CSS that controls this? I can't seem to find this info in a search. Here's a link to the CSS for reference:

jQuery Mobile Default CSS

Thanks!

UPDATE

I was originally meaning to discuss 'listview' exclusively for the buttons. I was too broad in my original explanation but basically I'm trying to resize not all buttons but just the <li>s.

Answer 1

Why so complicated? This would do the trick too IMHO.

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

Answer 2

.ui-btn is the class you have to use.But this same class is used not just by "buttons" alone .Other jQuery Mobile components like listview also make use of it.So if you set the height of .ui-btn you will mess up those components too.So it is better to define a separate class,only for those five buttons and then set the height to 20% to that class.

Answer 3

It is simple as that:

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

Answer 4

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

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

Here is some sample listview output from the 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

There was a little more to this than I had previously posted, here is some 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 id of my data-role="page" element and #my-listview is the id of the data-role="listview" element.

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