Search code examples
jquery-mobilejquery-mobile-listview

How to position the list view Thumbnails to the right in jQuery mobile 1.4.0?


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

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.