Question

I have a list view in my jQuery mobile app. I need to position the Thumbnails to the right I have used the following code in my css file but it didn't work for jQuery mobile 1.4.0 ? is .ui-li-thumb class deprecated in jQuery mobile 1.4.0 ? how can i do that ? please help me ..

<ul data-role="listview"  data-inset="true"  data-filter="true" data-filter-   placeholder="Search  " 
data-split-icon="delete"  style="margin-top: 40px;"  > 

 <li class="RTLList" > <img src="img/thumb" /> element </li>
</ul>

Css

  .RTLList .ui-li .ui-btn-text .ui-link-inherit .ui-li-thumb  {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    right: 0;
    margin-right: 0 !important;

} 

I have tried also , but it didnt work for me !!

.ui-listview .ui-li-has-thumb .ui-li-thumb {
    right: 0;
    margin-right: 0 !important;
    text-align:right;
   float:right;
   }
Était-ce utile?

La solution

Here is a DEMO

.ui-listview>.ui-li-static.ui-li-has-thumb {
    padding-left: 1em;
    padding-right: 6.25em;
}
.ui-listview .ui-li-has-thumb>img:first-child {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon){
    border-top-left-radius: 0;
}
.ui-listview>li.ui-last-child img:first-child:not(.ui-li-icon){
    border-bottom-left-radius: 0;
}

The CSS puts the LI padding on the right instead of left and then absolutely positions the thumbnail to the right.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top