Geek Answers Handbook

JQuery Mobile, view lists thumbnail size

I integrate jQuery Mobile with a list of thumbnail views, but resize my images on the fly to a fixed width. Changing the width of .ui-li-thumb does not help. How to make your thumbs wider?

+4
source share
3 answers

Try this and turn on ", .ui-li-icon"!

.ui-li-thumb, .ui-li-icon { left: 1px; max-height: 60px; max-width: 60px; position: absolute; top: 0; }

This reduces the size of the thumbnail to 60 * 60 pixels in my case with each size.

If this does not work, provide a piece of your code to find out what is wrong (HTML, JS, CSS).

+7
source

I wanted to make thumbnails of thumbnails in the list. So I did it with jQuery Mobile version 1.4.2 :

 .ui-listview .ui-li-has-thumb > img:first-child, .ui-listview .ui-li-has-thumb > .ui-btn > img:first-child, .ui-listview .ui-li-has-thumb .ui-li-thumb { left: 1px; top: 1px; max-height: 40px; max-width: 40px; } .ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb { min-height: 0; padding: .7em 1em .7em 55px; }

The top, left and bottom padding that I define above is just to return these padding values ​​to the default values ​​for ui-btn . The image is positioned absolutely in the listview element, so if you want to make the image larger, you must compensate for this by increasing the min-height css property shown above.

+2
source

For me, this solution works fine on the list. It also adjusts the addition of inner text from the thumb.

 .ui-listview .ui-li-icon{ max-height: 32px; max-width: 32px; } .ui-li-static.ui-li-has-icon{ padding-left:50px; }

This is done for the case when the class .ui-li-icon is applied to the image

0
source

More articles:


All Articles