CODEWITHSUNDEEP
jquery-uijquery-mobile
Yang
Yang

Reputation: 6892

Jquerymobile UI: how to change image size within listview

I have a listview of lists where each list contains an image (left) and descriptions. Just like the example: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/lists/lists-thumbnails.html

I'm trying to make the image bigger and found out that width=xxx does not take any effect. Is this size fixed for images within listview? What class can override such restriction?

Upvotes: 2

Views: 13932

Answers (1)

dotchuZ
dotchuZ

Reputation: 2641

JQM says: To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square.

Try to inspect your item with firebug and override the CSS class. Should be something like: <img class="ui-li-thumb">

There you go: 

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

But you have to adapt also the list size...

Upvotes: 7

Related Questions