CODEWITHSUNDEEP
cssjquery-mobilehtml-lists
ares05
ares05

Reputation: 177

change height of li in jquery mobile

I am trying to change the height of a li element but with no luck. I have tried the solution given here but its just not working! I am working with jQM version 1.1.1. The listview is being generated dynamically. The following is the code:

$('.eventInfoBox').append(' <div id="eventInfoBoxContents"> \
   <div data-role="fieldcontain"> \
      <label>Target Item: </label> \
      <ul data-role="listview" data-inset="true" id="targetItemUL">\
          <li class="ui-li"><img style="width:20px;height:20px;margin-top: 3px;margin-left: 3px;" id="targetImage" src="images/products.jpg" /> \
             <div style="padding-left: 5px;"> \
                <h3>Testing</h3> \
             </div> \
          </li> \
     </ul> \
   </div> \
').trigger('create');

The CSS I've added is as follows: 

#targetItemUL > li .ui-li {
    height : 30px;
}

Could someone help me out here and tell me what is that I am doing wrong. Thanks!

Upvotes: 0

Views: 3343

Answers (2)

ares05
ares05

Reputation: 177

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.

Upvotes: 1

Mitya
Mitya

Reputation: 34556

Your li is .ui-li, but your current selector looks for a .ui-li element inside the LI. Change

#targetItemUL > li .ui-li

to

#targetItemUL > li.ui-li

Upvotes: 0

Related Questions