List items with labels, images or grids are styled as read only.

[Lisa Evans]

Hi,

I'm still working on building a catalog, but I've made a lot of progress since my previous question! I've gotten the functionality working and am now trying to make it look nice, as well as conforming to the UI requirements for iOS apps so there is less chance of our app being rejected.

I'm trying to use a list that has an image and a label inside each list item, organised using a grid. But I have found that when you drag anything inside a list item (a grid, an image, or even just a label), the list item changes to the style of a read-only list. In other words, it loses its gradient, it no longer changes colour if you hover your mouse over it, and it doesn't show any change when you click/tap it.

This is bad for my interface, because I do have it set up to navigate to a new page when you tap the list item, so it is giving the impression of not being interactive, when actually it is.

To reproduce this problem, create a list with the default three items, then drag a label into one of the list items. Then test it and watch how the two items without a label react when you hover your mouse over them or click them, and compare it to the list item with the label, which has a flat colour and is no longer interactive.

How can I fix this problem? I've been trying to find out by reading JQM docs and it doesn't look as though there's a simple way to convert a read only list item to a clickable list item.

[Maryna Brodina]

Hello! This is how JQM works. To avoid this create JavaScript asset with the next code:

code$(document).ready(function() {
$("li.ui-li-static").removeClass("ui-li-static")
});/code

[Lisa Evans]

Thanks Marina, that brought back the gradient on the list item, which helps. But it still doesn't behave the same as a default list item, ie. if you hover your mouse over it the appearance doesn't change, and there is no change when you click/tap it. I don't mind about mouseover on a mobile screen, but it needs to show which list item you've tapped, or it could get confusing if the wrong information comes up because you accidentally tapped the wrong one.

[Maryna Brodina]

Yes, I see... working on it.

[Maryna Brodina]

Trt this code:

code$(document).ready(function() {
$("li.ui-li-static").removeClass("ui-li-static").addClass('ui-btn').data('theme', 'a').attr('data-theme', 'a');
});/code

Please note that there is swatch "a" used. You would need to replace it with the swatch you use in your app

[Lisa Evans]

That works! Thank you! Perhaps it should be made into an option in the Tiggzi UI for lists.

[Marco Della Gala]

hello i have the same lisa's problem, but i would like to have the selected item colored in a different color when it is tapped.
I'm working with the old version of tiggzi and i can not change the buttom down color of any standard jquery mobile theme.
I tried to add a custom swatch in the jquery mobile theme, but if i try to change the .data('theme', 'a').attr('data-theme', 'a'); with .data('theme', 'my_swatch').attr('data-theme', 'my_swatch'); it does not works
is there any way to obtai a list with gray color for every list item and blue color for the selected (button down) one like in
http://jquerymobile.com/demos/1.2.1/d...

[Kateryna Grynko]

Hi,
answered here: https://getsatisfaction.com/tiggzi/to...

[Shawn Clabough]

I just had this same problem and after rewording my search 5 or 6 times, I found this. It should be documented somewhere in the list documentation.

[maxkatz]

It will be fixed.