Search jQuery

jQuery Forum

Listview content

in jQuery Mobile • 12 years ago

Im using the mobile framework to convert an existing touch web application.

Now previously I had images for my list which are 38x38

Is there a clean way to include this without having any issues ?

Also in the <li> tag im including more than just the image and the link. I have a div around my image to space it correctly and then a span after my link so I can have the link in a certain colour and other info in a differant color, will this cause any issues ?

Replies(2)

toddparker

Re: Listview content

12 years ago

If you just place an <img> tag inside a list, the framework will use the thumbnail styles which set the image to a max height and width of 80x80px. You could easily adjust the image size and padding by inspecting the thumbnail list example to see the classes and styles in play, then create a few overrides in your stylesheet (don't edit the theme css, add a new css in the head with overrides).

The .ui-li-thumb class is a good place to start. You can set the max-width and -height dimensions from 80 to 38 pixels. You should be able to the spacing and style of the image element directly instead of needing a div.

To set the text color, the best way is to do this in the theme stylesheet for one of your color swatches. You could either edit an existing swatch like "d" or copy all the styles from a swatch, rename it to a new letter (say "g"), change colors and apply it to the list by adding data-theme="g".

Hope this helps!

Todd

camelwoo

Re: Listview content

12 years ago

Thanks toddparker!

I make change as bellow

.ui-li-thumb, .ui-li-icon {
max-height: 40px;
max-width: 40px;
}

.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {
min-height: 20px;
padding-left: 45px;
}

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding-top: 11px;
padding-bottom: 11px;
}

Top Reply

Response title

Attachments

jQuery Forum

Listview content

Replies(2)

Re: Listview content

Re: Listview content

Statistics

Tags

Actions

Related Posts