So I did try the 1.2 library and it did in fact work. So maybe there is a bug in 2.0?
So I did try the 1.2 library and it did in fact work. So maybe there is a bug in 2.0?
Yes, it's a bug. We reported this issue.
Thank you, I really appreciate all of your help!
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.
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?
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...)
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?
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
Illya,
This permanently changed the class of the text. I would just like to change the text color when clicked.
Thanks
Hello Mike,
This property should make your label text red.
codecolor:red !important;/code