Question

I’m trying to put a collapsible panel that contains a listview, inside another listview. I’ve almost got it but can’t get the header of the panel to format correctly and it’s not “lined up” in proportion with the other listview items.

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-divider-theme="a">
            <li role="heading" data-role="list-divider">Options
            </li>
            <li data-theme="a">
                <a href="" data-transition="slide" data-theme="c" data-native-menu = "false">Create Map</a>
            </li>
            <li data-theme="a">
                <a href="#" data-transition="slide" data-theme="c" data-native-menu = "false">Close Map</a>
            </li>
            <div data-role="collapsible" id="" data-collapsed="false">
                    <h4>Add Map</h4>
                    <ul data-role="listview" data-inset="true" data-divider-theme="a">                
                    <li data-theme="a">
                        <a href="" data-transition="slide" data-theme="c" data-native-menu = "false">By ZipCode</a>
                    </li>
                    <li data-theme="a">
                        <a href="" data-transition="slide" data-theme="c" data-native-menu = "false">By Street #</a>
                    </li>
                </ul>
           </div>
           <li data-theme="a">
                <a href="" data-transition="slide" data-theme="c" data-native-menu = "false">View Map</a>
            </li>
        </ul>
    </div>
</div>

fiddle: http://jsfiddle.net/robertfah/UsZUU/

UPDATE

I found an example online here: http://jsfiddle.net/Gajotres/m6zVq/ which pointed me in the right direction. My only issue now is if I set data-inset="true" in the first <ul> instead of false, then the background of the <div> that’s collapsible, expands past the rest of the listview.

Here’s the updated fiddle: http://jsfiddle.net/robertfah/Skjyf/ (sorry, I don’t know how to update my first fiddle and save it)

Answer 1

Solution

Is this what you wanted to achieve: http://jsfiddle.net/Gajotres/34LJM/

I have added this css to your example:

.ui-collapsible .ui-collapsible-content {
    margin: 0 0 !important;
    padding: 10px 0 !important;
}

More info

If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.