How to resize image in the list ?

[Frank5474421]

Hi

How to resize the image in the List ?
the two option "icon" too small and "thumbnail" size too big for my projects.

thanks

[Kateryna Grynko]

Hello,
You can create your own layout using grid with image and label.
This will allow you to change image size.

[Frank5474421]

hi

Can use other way to do it ?
like CSS or js ?

[Kateryna Grynko]

You can use following CSS to set thumbnail size in mobile list component:
code.ui-page .ui-li .ui-li-thumb, .ui-page .ui-li .ui-li-icon {
max-height: 60px;
max-width: 60px;
}

/* Adjust list item height*/
.ui-page .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-page .ui-li-static.ui-li-has-thumb {
min-height: 0px;
}/code

[Adam Garbinski]

Katya. I have followed your advice and now the image size is OK but something is wrong with list item height. It preserves thumbnail and icon setting. Take look at the screen below. Right now it is set to "Thumbnail" option and it is to big. When i set it to "Icon" then it is too small and the image is outside list item area. Can you tell me what I am doing wrong?

[Kateryna Grynko]

Hi Adam,

What is the size of the image you're trying to upload?
Did you change styles for a List?

[Adam Garbinski]

Hi Katya.
Yes. I have created separate CSS for that. Image size is 43x43px.

[Kateryna Grynko]

Hi Adam,

Could you please show the code?

[Adam Garbinski]

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

/* Adjust list item height*/
.ui-page .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-page .ui-li-static.ui-li-has-thumb {
min-height: 43px;
}

[Kateryna Grynko]

Adam,

Please try the following code:
pre.ui-page .ui-li .ui-li-thumb, .ui-page .ui-li .ui-li-icon {
height: 43px;
width: 43px;
}/pre