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;
   }
user
  • 621
  • 15
  • 46

1 Answers1

0

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.

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • @ezankerThanks for helping me I tried it but it didn't work !! I am using jQuery mobile 1.4.0 , why do you use this symbol > after .ui-listview ?? – user Jan 07 '14 at 15:47
  • @ezankerCan you help me please ? its work on jQuery mobile 1.3.2 but not working on the version that I use which is 1.4.0 – user Jan 07 '14 at 15:52
  • The demo fiddle uses jQM 1.4 and works fine, did you go to the link? In CSS > means find the direct child of object. I used the exact CSS from jQM 1.4 and changed the appropriate attributes. – ezanker Jan 07 '14 at 20:48
  • @ezankerThis is my result http://jsfiddle.net/6b7QW/3/ I have tried to solve it but it didn't work for me , can you help me please ? – user Jan 07 '14 at 22:39
  • I am sorry , when i have posted my question , I forget the anchor element – user Jan 07 '14 at 22:40
  • @ezankerYes Thanks a lot , can i make the split line which is at the left of the element word transparent ?? How ? – user Jan 08 '14 at 08:12
  • @ezankerPlease Can you help me in this http://stackoverflow.com/questions/22076403/list-view-li-elemnt-height-is-less-than-its-thumbnail-height-in-jquery-mobile-1 I have tried many things to solve it but i failed :( – user Feb 27 '14 at 18:52
  • 1
    I put an answer there for you. – ezanker Feb 27 '14 at 19:02