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

Question

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?

Answer 1

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/