Setting Listview <Li> Height in Jquery Mobile

Setting Listview li Height in jQuery Mobile

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/

Setting Listview li Height in jQuery Mobile

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/

List view li elemnt height is less than its thumbnail height in jQuery mobile 1.4.0

First you need to use min-height instead of max-height.
Second you need to apply it to the first anchor tag within the li, not the li:

#EmpList li a:first-child{
  min-height:100px !important; 
}

DEMO

change height of li in jquery mobile

Fixed the problem! Arpit took your suggestion and inspected using firebug. The problem was the min-height property. It was set at 60px by jQM css and had to be overridden.

Jquery Mobile how to set height of Listview which is in collapsible-set

Here is your fiddle updated with a solution: http://jsfiddle.net/ezanker/CnSMr/2/

Basically, I assigend a class to your collapsible div (.popupcollapsediv) and then put your UL inside a dive with class .ulcontainerdiv.

    $.map(kennedy.webdb.userdata[0].Category, function (value, key) {
    return $("<div/>", {
        id: value.Name,
        "data-role": "collapsible",
        "data-inset": "false",
        class: "popupcollapsediv"
    }).append(
      $("<h2/>", {
          text: value.Name
      })).append(
        $("<div/>", {
          class: "ulcontainerdiv"
        }).append(
          $("<ul/>", {
            "data-role": "listview",
            "data-icon": "false"
          }).append(
    ...

I then used CSS to set the max-height of the div that contains each UL while allowing scrolling if the contained UL is taller than that max-height; and to remove padding from that autogenerated div created by the collapsible.

.ulcontainerdiv{
    max-height: 170px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.popupcollapsediv .ui-body-a {
    padding: 0;
    margin: 0;
}

Jquery Mobile - how to change the height of listview

In order to change the height of the listview while not overriding it:

• You should find the source of the class that is causing it.
• Remove the class with jquery
• replace it with your own class

To replace class

$("p").removeClass(".ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li ").addClass(".whatever .your .class .is");

You have to be detailed and specific.

How to resize the size of list items in Jquery Mobile 1.4

There's a number of ways to set a custom height for the list items, but i think percentage wont work. You could use jquery to get the screen size and divide it by the number of items and then update the css dynamically in pixels.

Demo modifying the JQM's given CSS name for static list items

http://jsfiddle.net/b53bg0j5/

CSS

.ui-listview>.ui-li-static {
height: 60px;
}

=================================================

Demo own class for list items with (!important) to enable it over JQM's original rule.

http://jsfiddle.net/52aey3o6/

CSS

.b {
height: 25px !important;
}

==================================================

direct css rule for li element

li {
height: 66px;
}

==================================================

custom list by adding a class for the (ul) element

<ul data-role="listview" class="FF">

.FF>li {
height: 46px;
}

JQuery Mobile - Custom listview height changes on click

Luis is right about the min-height from the jQM CSS file. You need to override it, but also remove top and bottom padding on the link as that causes the height issue on click:

.custom_link {
    padding-left: 50px !important;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 50px;
    max-height: 50px;
    min-height: 0 !important;
    height: 50px;
}

Updated FIDDLE

Setting line-height keeps the text vertically centered. If that is not important to you, just remove it.

---

Related Topics