Page 1 of 3

Change icon on list

Posted: Wed Jan 09, 2013 2:40 pm
by Michael4771079

Hi,
is it possible to change or delete icon on mobilelist?


Change icon on list

Posted: Wed Jan 09, 2013 3:29 pm
by Kateryna Grynko

Hi Michael,

Yes, you have to change "Class Name" property in List Component properties. For example, replace it with "my-custom-list".

To make icons in mobilelist disappear create Custom CSS with following rule:
code.my-custom-list li span.ui-icon
{
display: none !important;
}/code
To change icon create Custom CSS with following rule
code.my-custom-list li span.ui-icon
{
background-image: url("app-icon-email.png") !important;
}/code
Another way is to select list item, click "More properties" on Properties panel and add "data-icon" property with value star, plus, home etc:
Image

Here is full list of icons:
Bars - data-icon="bars"
Edit - data-icon="edit"
Left arrow - data-icon="arrow-l"
Right arrow - data-icon="arrow-r"
Up arrow - data-icon="arrow-u"
Down arrow - data-icon="arrow-d"
Delete - data-icon="delete"
Plus - data-icon="plus"
Minus - data-icon="minus"
Check - data-icon="check"
Gear - data-icon="gear"
Refresh - data-icon="refresh"
Forward - data-icon="forward"
Back - data-icon="back"
Grid - data-icon="grid"
Star - data-icon="star"
Alert - data-icon="alert"
Info - data-icon="info"
Home - data-icon="home"
Search - data-icon="search"

You can find more here: http://jquerymobile.com/test/docs/but...

Also there is a long blue list of available icons (look at the middle of the web page):
http://jquerymobile.com/test/docs/lis...

To hide icon specify data-icon="false".


Change icon on list

Posted: Sun May 19, 2013 6:04 am
by Slang

The last method specified in the answer above, to click "More properties" on Properties panel and add "data-icon" property with value star, plus, home etc

Can you verify if this actually works? I cannot seem to get it to work, not sure if I need to call a refresh from somewhere or something else.


Change icon on list

Posted: Sun May 19, 2013 6:15 am
by Alena Prykhodko

Hello!

I've tested and it's working. Please try to delete and add 'data-icon' again. Make sure you've pressed Save Options.


Change icon on list

Posted: Sun May 19, 2013 6:51 am
by Slang

I dont want to delete and recreate, I've got multiple labels within the list item (cell) and a lot of related code that I dont want to type in :(

Anyway thanks for your help.


Change icon on list

Posted: Sun May 19, 2013 6:53 am
by Alena Prykhodko

You shouldn't delete List item, just 'data-icon' in More Properties and create it again.


Change icon on list

Posted: Sun May 19, 2013 6:57 am
by Slang

Yep, tried that multiple times, doesnt work for me. Still shows the same right arrow icon on list items.


Change icon on list

Posted: Sun May 19, 2013 7:12 am
by Alena Prykhodko

Could you please share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a I'll take a look.


Change icon on list

Posted: Sun May 19, 2013 7:18 am
by Slang

Ok take a look. The list populates dynamically from a service response so not sure if that is the problem.


Change icon on list

Posted: Sun May 19, 2013 7:36 am
by Alena Prykhodko

Have you shared the app? Tell me its name and page with problem please.