Forum | Appery.io

Hi

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

thanks

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

hi

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

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

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?

Hi Adam,

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

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

Hi Adam,

Could you please show the code?

.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;
}

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