Add a label to list item, changes list to white. How to fix?

[Stephen Koford]

So I did try the 1.2 library and it did in fact work. So maybe there is a bug in 2.0?

[Maryna Brodina]

Yes, it's a bug. We reported this issue.

[Stephen Koford]

Thank you, I really appreciate all of your help!

[Maryna Brodina]

Hello!
After some research we have found that such behaviour of List component with nested other components in library version 2.0 is not bug. We use jquerymobile 1.4 in library 2.0. It has a different theme behaviour than Jquerymobile 1.3.

To fix this issue for example for flat-ui theme use the following CSS for :
prediv.ui-page.ui-page-theme-a div.ui-content.ui-body-a ul.ui-listview-inset.ui-group-theme-a li.ui-li-static {
background-color:#2c3e50;
border:none;
}
div.ui-page.ui-page-theme-b div.ui-content.ui-body-b ul.ui-listview-inset.ui-group-theme-b li.ui-li-static {
background-color:#16a085;
border:none;
}
div.ui-page.ui-page-theme-c div.ui-content.ui-body-c ul.ui-listview-inset.ui-group-theme-c li.ui-li-static {
background-color:#f2f2f2;
border:none;
}
div.ui-page.ui-page-theme-d div.ui-content.ui-body-d ul.ui-listview-inset.ui-group-theme-d li.ui-li-static {
background-color:#c1392b;
border:none;
}
div.ui-page.ui-page-theme-e div.ui-content.ui-body-e ul.ui-listview-inset.ui-group-theme-e li.ui-li-static {
background-color:#f1c40f;
border:none;
}
div.ui-page.ui-page-theme-f div.ui-content.ui-body-f ul.ui-listview-inset.ui-group-theme-f li.ui-li-static {
background-color:#3498db;
border:none;
}
div.ui-page.ui-page-theme-g div.ui-content.ui-body-g ul.ui-listview-inset.ui-group-theme-g li.ui-li-static {
background-color:#2ecc71;
border:none;
}

/prePlease let us know if you have any questions.

[Mike6580064]

Maryna,

I'm using the same theme as Stephen but I don't mind that the list component background turns white with a label component placed within.

However, I don't like how there is no visual change to a list item when clicked on. Is there a way to change the list item background color when focused? What about adding a glow?

[Evgene Karachevtsev]

Hello Mike,

Unfortunately, when you're adding label to the list item html markup is changed. You can't use pseudo class :focus to add glow when item is selected in this case. Try using another approach (if going to use hidden label, you can use attributes instead: http://docs.appery.io/documentation/b...)

[Mike6580064]

Evgene,

Thanks for the explanation.

Would I at least be able to add CSS to change the list item's text color when clicked on? Or maybe add an event to my mobilelistitem that will run JS that changes the label's text color?

What would I need to do if this is even possible?

[Illya Stepanov]

Hi Mike,

You can try this way:
Run this JS code on "page show" event:
precode
var classHighlight = 'highlight';
var $thumbs = $('.ui-li-static').click(function(e) {
e.preventDefault();

Code: Select all

 $thumbs.removeClass(classHighlight); 

 $(this).addClass(classHighlight); 

});/code/pre

And create custom CSS:
precode
.highlight {
-moz-box-shadow: inset 0 0 3px #050 , 0 0 9px #050;
-webkit-box-shadow: inset 0 0 3px #050 , 0 0 9px #050;
box-shadow: inset 0 0 3px #050 , 0 0 9px #050;
color:red !important;
}/code/pre

[Mike6580064]

Illya,

This permanently changed the class of the text. I would just like to change the text color when clicked.

Thanks

[Evgene Karachevtsev]

Hello Mike,

This property should make your label text red.

codecolor:red !important;/code