jquerymobile compact listview css

Question

The current listview I'm using has extra space above and below the texts. How do I make it a really compact one? http://jsfiddle.net/qW6sP/8/

       <ul data-role="listview" data-theme="d" data-divider-theme="d">            
        <li>
                <h6 style='font-size:8pt;'>Mode: repairing</h6>
                <p>00 hours 00 mins 00 secs</p>                    
                <p class="ui-li-aside"><a href="#" data-role="button" class="ui-btn-right" id="dismissbtn" onclick="fadeint()" data-mini="true" >Done</a></p>

        </li>
      </ul>

mr_lewjam · Accepted Answer · 2012-10-01 10:29:28Z

1

The extra space is created by the h6 and p tags. Use a custom span class and then you can position and size the text however you want...

html:

<span class="compactHeader"> Mode: repairing </span>
<span class="compactText">00 hours 00 mins 00 secs</span>

css:

.compactHeader
{
  //set size and positioning as you want.
}

.compactText
{
  //set size and positioning as you want
}

answered Oct 1, 2012 at 10:29

mr_lewjam

1,1901 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquerymobile compact listview css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related