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