CODEWITHSUNDEEP
javascriptjqueryhtmlmobile
Timo Ernst
Timo Ernst

Reputation: 16003

Nested collapsibles break jQuery Mobile layout

I tried to nest a collapsible inside a listview but it breaks my layout: http://dl.dropbox.com/u/17844821/zeug/jquery_mobile_collapsible_break.jpg

What's wrong?

Here is my code:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>jQMail</title> 
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme="d">
    <div data-role="header" data-theme="d">
        <h1>jQMail</h1>
    </div>
    <ul data-role="listview">
        <li><a href="#inbox">INBOX</a></li>
        <li><a href="#inbox">Sent</a></li>
        <li><a href="#inbox">Trash</a></li>
        <li>
            <h3>Archive</h3>
            <div data-role="collapsible" data-content-theme="d">
                <h3>By date</h3>
                <ul data-role="listview" data-inset="true" data-theme="d">
                    <li><a href="#m2010">2010</a></li>
                    <li><a href="#m2009">2009</a></li>
                    <li><a href="#m2008">2008</a></li>
                </ul>   
            </div>
        </li>
    </ul> 
</div>
</body>
</html>

Upvotes: 0

Views: 1671

Answers (1)

Jean-Charles
Jean-Charles

Reputation: 1720

The CSS imported from jquery.mobile.min.css applies a margin

.ui-collapsible-content {
  margin: 0 -8px;
  ...

You can override it with CSS, adding margin on .ui-collapsible-content style, like that :

.ui-collapsible-content {
    margin: -9px 0 0 0 ;
}

Edit : If you just want to only impact this component, you can add an id on the parent div, and specify the CSS path. For example :

<div id="dateListView" data-role="collapsible" data-content-theme="d"> ...

with this CSS

div#dateListView.ui-collapsible div.ui-collapsible-content {
    margin: -9px 0 0 0 ;
}

Upvotes: 1

Related Questions