Forum | Appery.io

I need to implement a read-only thumbnail list. Please see jquery mobile docs below (section pertaining to thumbnail list):

http://demos.jquerymobile.com/1.2.0/d...

I've searched through the forum and it has been suggested to put a label component inside list-item, but this removes the thumbnail as well as other customization (e.g. data-icon = false) from the listitems. Furthermore it doesn't seem possible to format the text (as in jquery mobile docs above) this way.

What would you suggest?

Hello Cody,

Please find more here http://devcenter.appery.io/documentat...
You should be able to format text with CSS rule, add new asset with code:
pre
[name=mobilelist] li h3{
font-size:20px;
}/pre

Alena,

Thanks, but this is not what I am asking. My concern is not formatting the text, but I am looking to implement a "read-only" list (please see jquery documentation link I sent), ie. the content is not linked but displayed as read-only. I believe the key here might be to remove the <a href tags.

How may I achieve this?
Regards.

Sorry for delay, it will take some time. We need to test this more.

Cody, I did this by populating the list with data from a service and then appending the list item element without the code<a>/code
Example:
code
element&#46;children()&#46;remove();
element&#46;append('<p class="ui-li-heading"><h2><table width="100%"><tr><td width="8&#46;57%">'+value&#46;table[0]&#46;thead&#46;tr&#46;th[0]&#46;content+'</td></tr></table></h2></p>');
/code

Hi Cody,

Please try the solution offered by Dirk -- and let us know if you'll need any fearther help.

Hi Illya,

Thanks for checking in. Unfortunately this does not solve the problem. Please see screenshot of JS associated with mapping to ListItem attached. With that listitems content is getting displayed as expected but the items are not getting converted to 'read-only' mode. I am guessing this might be because 'a' and 'a href' tags are not getting removed.

What would you suggest?

I forgot to mention that I made the list items into dividers. This makes the item "read only" and with the provided code you can fill that divider with data.

Dirk - can you please share how you converted the listItems into dividers only (may be share screen shots for Appery component UI creation, and the REST service response mapping)? On checking the auto-divider option in list component Appery UI, and on REST service mapping to list-items, I find that the divider appears but the list-items have the same issue as before. Thanks.

Hi Cody,

You could replace all links with another tag, for example "< p ", using:prereplacewith (http:&#47;&#47;api&#46;jquery&#46;com/replacewith/):

$(element)&#46;find("a")&#46;replaceWith("p");/pre