列表视图里elemnt高度小于jQuery Mobile的1.4.0的缩略图高度 [英] List view li elemnt height is less than its thumbnail height in jQuery mobile 1.4.0

问题描述

我在我的jQuery移动1.4.0应用以下列表视图中，每个列表元件具有不同量中的行中显示的数据，这个​​问题是，如果有一个li元素包含小于缩略图数数据和它的高度高度，缩略图高度的剩余部分将不可见如出现以下的图像中，

我所做的列表视图li元素不是使用这个code缩略图高度更高的高度：#EmpList李{最大高度：120像素重要;！ }但它没有为我工作的李高度剪掉变了！我怎样才能让李高度比它的缩略图高度更高？

请帮我...

 ＆LT; D​​IV数据角色=页面＆GT;
＆LT; D​​IV数据角色=头＆GT;
     ＆LT; H1＆GT;第1页＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV数据角色=内容＆GT;
＆LT; UL数据角色=列表视图ID =EmpList数据插入=真正的数据过滤器=真正的数据 - 过滤器占位符=搜索数据分割图标=删除的风格=的margin-top：40像素; ＆GT;＆LT;立GT;＆LT; A HREF =＃＆GT;
＆所述; IMG SRC =htt​​p://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg/＆GT;
＆LT; FONT类=一号线＆GT; EMP1＆LT; / FONT＆GT;＆LT; BR＆GT;
＆LT; FONT类=2号线＆GT;编号：123 LT; / FONT＆GT;＆LT; BR＆GT;
＆LT; FONT类=3号线＆GT;部：市场营销与LT; / FONT＆GT;＆LT; BR＆GT;
＆LT; FONT类=4号线＆GT;萨尔：2000 $＆LT; / FONT＆GT;＆LT; BR＆GT;
＆LT; FONT类=LINE5＆GT;规格：社会营销＆LT; / FONT＆GT;
＆LT; / A＆GT;＆LT; A HREF =＃ID =裂ICON1级=删除＆GT;删除＆LT; / A＆GT;
＆LT; /李＆GT;＆LT;李班=RTLList＆GT;＆LT; A HREF =＃＆GT;
＆所述; IMG SRC =htt​​p://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg/＆GT;
＆LT; FONT类=一号线＆GT; EMP2＆LT; / FONT＆GT;＆LT; BR＆GT;＆LT; BR＆GT;
＆LT; FONT类=2号线＆GT;编号：123 LT; / FONT＆GT;＆LT; BR＆GT;
＆LT; FONT类=3号线＆GT;规格：训练生＆LT; / FONT＆GT;＆LT; BR＆GT;
＆LT; / A＆GT;＆LT; A HREF =＃ID =裂图标2级=删除＆GT;删除＆LT; / A＆GT;
＆LT; /李＆GT;＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

CSS

  #EmpList李{
  最大高度：120像素重要;
 }
的.ui-列表视图＆GT;的.ui丽有拇指＆GT;的.ui-BTN {
   保证金左：2.5em;
   填充左：1EM;
   填充右：6.25em;
}
的.ui-列表视图的.ui丽有拇指＆GT;的.ui-BTN＆GT; IMG：首先，孩子{
   位置：绝对的;
   顶部：10px的;
   右：8像素;
   左：汽车;边界：固体绿色;
   最大宽度：100像素重要;
   最大高度：100像素重要;
}的.ui-列表视图＆GT; li.ui一胎IMG：第一胎：不是（的.ui丽图标）{
   边界左上半径：0;
   边框右上角半径：5像素;
}的.ui-列表视图＆GT; li.ui-最后孩子IMG：第一胎：不是（的.ui丽图标）{
    边界左下角半径：0;
    边框右下角半径：5像素;
 }
 的.ui-列表视图＆GT; li.ui丽有-ALT＆GT;的.ui-BTN {
     保证金右：0;  } 的.ui-列表视图＆GT; li.ui一胎＆GT; a.ui-BTN + a.ui-BTN {
     边框左上角的半径：5像素;
     边框右上角半径：0像素;
  } 的.ui-列表视图＆GT; li.ui一胎＆GT; a.ui-BTN：首先，孩子{
     边框左上角的半径：0像素;
     边框右上角半径：5像素;  }
 的.ui-列表视图＆GT; li.ui-最后孩子＆GT; a.ui-BTN + a.ui-BTN {
     边框左下角半径：5像素;
     边框右下角半径：0像素;  } 的.ui-列表视图＆GT; li.ui-最后孩子＆GT; a.ui-BTN：首先，孩子{
    边框左下角半径：0像素;
    边框右下角半径：5像素;}的.ui-列表视图，插入＆GT; li.ui丽已经-ALT＆GT;的.ui-BTN +的.ui-BTN {
    右边框：0;
 } 的.ui-列表视图，插入＆GT;立GT; a.ui-BTN：首先，孩子{
     左边框：0;
  }.delete {
   左：0重要;！
}
 

解决方案

首先，你需要最小高度，而不是最大高度使用。
其次你需要的李内将其应用到第一锚标记，而不是李：

  #EmpList李答：首先，孩子{
  最小高度：100像素重要;
}
 

  

演示

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;   
}

解决方案

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

这篇关于列表视图里elemnt高度小于jQuery Mobile的1.4.0的缩略图高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！