jQuery Mobile embedded list inside listview

Question

I'm trying to create an ordered list inside of a jQuery Mobile ListView. The problem is that the listview has the data-autodividers="true" and this also gets applied to the embedded ordered list. I've tried to set the data-role="none" on the ol and each of the li's, and even set the data-autodividers="false" on the ol, and it still renders the dividers on the embedded ol. Is there a way to prevent the autodividers from being created in the first place?

I've hacked this problem by just targeting the embedded dividers and just setting them as display:none, but I'd rather just have jQuery Mobile not add the dividers in the first place.

Here's a JSFiddle: http://jsfiddle.net/straker/eM8tb/

This is a similar question to https://stackoverflow.com/questions/13422871/jquery-mobile-listview-and-formatting-embedded-html-lists, but deals with the autodividers and not the styling of the list (which is also wrong but can be fixed with CSS as well).

yeyene · Accepted Answer · 2013-06-01 06:17:02Z

1

I also didn't find in JQM doc.

but you can use this script to remove inner list autodivider.

see DEMO here http://jsfiddle.net/eM8tb/3/

JQUERY

$( "ol#inner_list li" ).each(function() {
    var c = $(this).text();
    if (c.length == 1)
        $(this).remove();
});

HTML

<ol id='inner_list' data-role="none" data-autodividers="false">

answered Jun 1, 2013 at 6:17

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Mobile embedded list inside listview

1 Answer 1

JQUERY

HTML

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JQUERY

HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Related