0

I have the following list view in my jQuery mobile 1.4.0 app,each list element has different amount of data displayed in lines , the problem is that if there is an li element contains few data and its height less than the thumbnail height , the remaining part of the thumbnail height will be invisible as appear in the following image ,

I have made the height of the listview li element greater than its thumbnail height using this code : #EmpList li{ max-height:120px !important; } but it didnt work for me the li height didnt changed ! How can I make the li height be greater than its thumbnail height ?

Please help me...

<div data-role="page">
<div data-role="header">
     <h1> page1</h1> 
</div>
<div data-role="content">
<ul data-role="listview"  id="EmpList" data-inset="true"  data-filter="true" data-    filter-placeholder="Search" data-split-icon="delete"  style="margin-top: 40px;"  > 

<li><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg"   />
<font  class="line1"  > Emp1</font><BR> 
<font   class="line2" >Id:123</font><BR>
<font class="line3" >Dep:Marketing</font><BR>
<font class="line4" >Sal:2000$</font><BR>
<font class="line5" >Spec:Social Marketing</font>        
</a><a href="#"  id="split-icon1" class="delete">Delete</a>
</li>

<li class="RTLList" ><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font  class="line1"  > EmP2</font><BR><BR> 
<font   class="line2" >Id:123</font><BR>
<font class="line3" >Spec:Trainee</font><BR>         
</a><a href="#"  id="split-icon2" class="delete">Delete</a>
</li>

</ul>        
</div>

CSS

#EmpList li{
  max-height:120px !important; 
 }


.ui-listview>.ui-li-has-thumb>.ui-btn {
   margin-left: 2.5em;
   padding-left: 1em;
   padding-right: 6.25em;
}
.ui-listview .ui-li-has-thumb>.ui-btn>img:first-child{
   position: absolute;
   top: 10px ;
   right:8px;
   left: auto;border: solid green;
   max-width:100px !important;
   max-height:100px !important; 
}

.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon){
   border-top-left-radius: 0;
   border-top-right-radius: 5px;
}

.ui-listview>li.ui-last-child img:first-child:not(.ui-li-icon){
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 5px;
 }


 .ui-listview>li.ui-li-has-alt>.ui-btn{
     margin-right: 0;

  }

 .ui-listview>li.ui-first-child>a.ui-btn+a.ui-btn{
     border-top-left-radius: 5px;
     border-top-right-radius: 0px;
  }

 .ui-listview>li.ui-first-child>a.ui-btn:first-child{
     border-top-left-radius: 0px;
     border-top-right-radius: 5px;

  }


 .ui-listview>li.ui-last-child>a.ui-btn+a.ui-btn{
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 0px;

  }

 .ui-listview>li.ui-last-child>a.ui-btn:first-child{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 5px;

}

.ui-listview-inset>li.ui-li-has-alt>.ui-btn+.ui-btn{
    border-right: 0;
 }

 .ui-listview-inset>li>a.ui-btn:first-child{
     border-left: 0;
  }

.delete {
   left: 0 !important;   
}

enter image description here

user
  • 621
  • 15
  • 46
  • Please help me.. Its very important for me to solve this problem any help or guide would be greatlly appreciated – user Feb 27 '14 at 18:41

1 Answers1

3

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

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • I have a question , i have searched the internet about it but i didnt found any usefull answer, can we reduce the width "length" of the li bottom border ? if i have a list view with data-inset="false" , can i a djust the li border-bottom length to be less than the page width ? – user Feb 27 '14 at 19:26
  • @ezankerdid I success in making you understand my question ? Please can you help me more .. – user Feb 27 '14 at 19:38
  • By definition, the bottom border is the same width as the LI. Do you want the LI a little inset, or just the border? If just the border, you can do it like this: http://jsfiddle.net/ezanker/t9G2h/1/ – ezanker Feb 27 '14 at 19:45
  • @ezankerThis is exactly what i need , make the border little inset Tnanks a million , I dont want to be heavy person on you , but I am a beginner in JQM and i learn from you , I have a final problem in this page of my app and i need a help in solving it http://stackoverflow.com/questions/22022395/how-to-position-the-placeholder-and-search-icon-at-the-center-of-search-input-in can you help me ? – user Feb 27 '14 at 20:01
  • Easy fix +1 well done. Lines text need to be wrapped as they overlap with img @user. – Omar Feb 27 '14 at 21:12