How to put a non-inset list inside a grid

Question

I need to put a collapsible listview into a responsive grid, but I need the the collapsible and the listview to be inset=false, so it takes the full width of the iphone size.

But the inset function doesn't seem to be compatible with the grid...

Here is my non-working test :

  <!-- Home -->
<div data-role="page" id="page1">
    <div data-role="content">
<div class="ui-grid-a ui-responsive">
            <div class="ui-block-a">
                            <div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="false" id="custom-collapsible">
                <div data-role="collapsible">
                    <h2>
                        Préconisations
                        <span class="ui-li-count preco-count">0</span>
                    </h2>
                <ul data-role="listview" data-divider-theme="b" data-inset="false" id="custom-listview">
                    <li data-role="list-divider" role="heading">
                        Divider
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>                    
                </ul>
                                </div>
                </div>
            </div>
            <div class="ui-block-b">
                other content, which apear at tje left of the grid on large screens, and at the bottom on small screens
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/nmZhz/3/

Thanks

score 2 · Accepted Answer · answered Apr 16 '13 at 16:01

Working example: http://jsfiddle.net/Gajotres/nmZhz/2/

HTML :

<!-- Home -->
<div data-role="page" id="page1">
    <div data-role="content">
        <div class="ui-grid-a ui-responsive">
            <div class="ui-block-a">
                <ul data-role="listview" data-divider-theme="b" data-inset="false" id="custom-listview">
                    <li data-role="list-divider" role="heading">
                        Divider
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>
                    <li data-theme="c">
                        <a href="#" data-transition="slide">
                            Button
                        </a>
                    </li>                    
                </ul>
            </div>
            <div class="ui-block-b">
                other content, which apear at tje left of the grid on large screens, and at the bottom on small screens
            </div>
        </div>
    </div>
</div>

CSS :

#custom-listview {
    margin: 0 !important;
}

Actually, I simplified a little to much my case, by removing the collapsible around my listview. Your solution work for the listview itself, but not for the collapsible. I tried to remove the margin too, but it doesn't work. Any idea ? Thanks — Matthieu, Apr 19 '13 at 09:19

How to put a non-inset list inside a grid

1 Answers1