Forum | Appery.io

Hi Alex,

Did you change "mobilelistName" in this code with your mobile list component name?

See details how to get it:
http://prntscr.com/3w754r/direct

So if your list name is "mobilelist_30" your code should be:

pre

[name=mobilelist_30] {
display:table;
width:100%;
}
[name=mobilelist_30] h3{
display:table-cell!important;
vertical-align:middle;
height: 50px;
}

/pre

Regards.

Hi Yurii,

Yes I do,,,I double check that, and I changed the mobilelistname...

The thumbnail is not resized...

In your code, which line is for resize the thumbnail on the list?

Regards

Hi Alex,

Use the following CSS code to change a thumbnail size:pre[name=mobilelist_30] li a img{
height: 50px !important;
width: 50px;
}/pre

Hi,
How can I add more lines of text to a list like in the following example?

I have tried to add a grid inside the list item, but I dont like the end result.

Hi Alex,

What if to use Label component?

Hi Alena,
As I said, I dont like the end result if I add a grid and image component with labels. It doesnt look well on different screen sizes.

Thats why I asked, how can I add two lines of text to the original list item.

Regards

I took a look at this, but still dont know how to make it works...

http://stackoverflow.com/questions/79...

Hi Alex.

To change image size and get centered your button text you can use following CSS code:

pre

/* lets assume that you want thubnail height = 100px. So XX = "100px". */
[name="mobilelist_30"].ui-listview .ui-li-has-thumb .ui-btn img:first-child{
max-width: none;

 height: 100%; 
 max-height: none; 

}

[name="mobilelist_30"] a.ui-btn{
/* Replace "100px" with "XX". */
height: 100px;
}

/* 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;
}

[name=mobilelist_30] {
display:table;
width:100%;
}
[name=mobilelist_30] h3{
display:table-cell!important;
vertical-align:middle;

/* Replace "100px" with "XX". */
height: 100px;
}

[name=mobilelist_30].ui-listview li a h3 {
/* you should adjust this left padding in accordance with your needs */
padding-left: 40px;
}

/pre

Also. If you want to make "line break" in your button text you can use "
" tag inside this text.

For example following code(inside ADD JS to the TEXT property) could be used to insert this line break.

pre

var returnString = "hello" + "
" + "world";

//var returnString = value + "
" + "Second line";

return returnString;

/pre

Regards.

thanks!