CODEWITHSUNDEEP
jqueryhtmljquery-mobilehtml-lists
Nathan Osman
Nathan Osman

Reputation: 73195

How to force a nested list to remain inline with jQuery Mobile?

I have a list that I want to embed within another list. However, jQuery Mobile wants to create a separate page for the embedded list.

Here is what I have:

<ul data-role="listview">
    <li>Item 1</li>
    <li>
        Item 2
        <ol>
            <li><p>Embedded item 1</p></li>
            <li><p>Embedded item 2</p></li>
        </ol>
    </li>
</ul>

I would prefer a solution that doesn't touch the inside list since that's actually being pulled from an external source.

Is there any way to make the list display inline?

Upvotes: 5

Views: 3365

Answers (2)

Aaron Springer
Aaron Springer

Reputation: 233

For those who Googled to find a solution similar to this.

Another way to go about this is to use the inlinelistview plugin. It allows listview items to open up inline within the list and then be toggled closed again by the user.

On Github

Upvotes: 0

dkarzon
dkarzon

Reputation: 8038

This is something that has changed between alpha3 and alpha4. All you need to do is wrap the ol in a div and it will display (Not very pretty but it will display)

From there you can make it a listview and set it to inset to make it look a bit better.

See: http://jsfiddle.net/MyHaB/1/

Upvotes: 5

Related Questions