CODEWITHSUNDEEP
cssjquery-mobile
Nick LaMarca
Nick LaMarca

Reputation: 8188

Shrink Height Of List Items In Listview

I am creating a collapsible listview the markup is below. I want to be able to shrink the height of the list items currently I can only fit a few on a mobile screen. 

<div id="accMain0" data-role="collapsible" data-inset="true" data-collapsed="false">
    <h3>
        Travel
    </h3><div id="myAppsSectionGridTable" data-role="listview" data-inset="false">
        <li><a onclick="selectApproval(&#39;ed5895bc-0f4a-e211-a9ba-0050568e20a1&#39;,&#39;XP%2boFSgWxG0%3d&#39;,&#39;&#39;,&#39;true&#39;,&#39;false&#39;,&#39;false&#39;,&#39;true&#39;)"><img src="Images/travel.png" alt="" class="ui-li-icon" /><h3>
    Victor Chavez
        </h3><p>Try Again NAck12345</p></a></li><li>

Upvotes: 0

Views: 205

Answers (1)

peterm
peterm

Reputation: 92785

Well, you can override margin, padding and a font-size if you want in a few jQM styles

.ui-li-heading { 
    /*font-size: 16px;*/
    margin: .3em 0; 
}
.ui-li-desc { 
    /*font-size: 12px;*/
    margin: -.5em 0 .3em; 
}

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
     padding-top: .2em; 
     padding-bottom: .2em; 
}

Here is a jsfiddle example

Upvotes: 2

Related Questions