Question

I’m trying to make a multilevel sort of menu for a side panel. The code I’m using is in this fiddle. It sort of works but the content of the collapsible element is wrongly formatted, with the content of the list being cut out at both sides (tried in Firefox or Google Chrome). What is the correct way to do this? I don’t like the data-inset="true" option since it changes the entire appearance. I just want it to be whole wide but with the correct padding.
On the other hand, if there is another way to do it (like collapsible sets with elements that can’t be expanded) I’m open to suggestions.

Disclaimer: I’m a total noob to jqm and web development.

Answer 1

Solution

Here’s a working example: http://jsfiddle.net/Gajotres/m6zVq/

This css will fix your problem and it will not interfere with other listviews:

.ui-collapsible div ul {
    margin: -0.6em 0 !important; //counter top/bottom margins without changing default ones
}

.ui-collapsible div ul .ui-corner-top, .ui-collapsible div ul .ui-corner-bottom {
    border-radius: 0; // remove border radius
} 

.ui-collapsible div ul li.ui-li-divider {
    padding: 0.5em 15px 0.5em 12px !important;
}

EDIT :

Here’s another solution: http://jsfiddle.net/Gajotres/BfGJY/

Without css. But still a workaround. There’s one listview above collapsible element and one listview below it.

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.