JQM - How to use space under thumbnail in listview

Question

I am using a Jquery Mobile listview with a thumbnail. Within this listview I will have another listview which again uses a thumbnail and is also set as inset (The outer listview is not inset)

The code I have works OK but I want to be able to use the space under the thumbnail in the first list view so that the width of my inner list view is the width of the screen.

Here is a JSFiddle of what I have and you can see from it what I am trying to achieve:

http://jsfiddle.net/DonalRafferty83/NHku5/1/

And the code from the JSFiddle is as follows:

<ul data-role="listview" data-inset="true">
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Broken Bells</h2>
                        <p>Broken Bells</p></a>
                    </li>
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Warning</h2>
                        <p>Hot Chip</p></a>
                    </li>
                    <li><a href="#">
                        <img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" />
                        <h2>Wolfgang Amadeus Phoenix</h2>
                        <p>Phoenix</p>

                        <ul data-role="listview" data-inset="true" style="width:100%;margin-top:50px;">
                            <li><img src="http://www.addict.co.uk/images/products/verylarge/IRON_MAN_FACE_OF_IRON_TEE_1359634428_ADMM111J_260_3.jpg" /><h2>Wolfgang Amadeus Phoenix</h2>
                        <p>Phoenix</p></li>
                        </ul>
                        </a>
                    </li>
                </ul>

You can see from the JSFiddle that the inner list element only takes up about 75% of the space and is to the right of the thumbnail in the outer list view element. My guess is that JQM aligns everything up like this when a thumbnail is used in a list view element?

So my question is - is there an easy way to get the inner list view elements to take up a 100% width and appear under the thumbnail of the out list view element?

Yes like that but I am actually not using a linked list so when I remove the anchors I am still stuck even with your solution, please check out this new fiddle - http://jsfiddle.net/DonalRafferty83/NHku5/1/ — Donal Rafferty, Apr 21 '14 at 18:17
Perfect, do you want to add that as an answer and I will mark it as correct? — Donal Rafferty, Apr 22 '14 at 12:45

score 1 · Accepted Answer · answered Apr 22 '14 at 15:47

You need first to wrap second listview in any element, e.g. span; otherwise, it will be converted into a Nested Listview.

Give li element that wraps the listview an id or class, as you're going to override styles of this specific element only.

<li class="custom-li">
  <span>
    <ul data-role="listview">
      <li>Item</li>
    </ul>
  </span>
</li>

Linked Listview:

You only need to reposition link icon of parent li.
```
.custom-li .ui-icon-arrow-r {
  top: 20% !important;
}
```
Demo
Read-only Listview:

Remove padding of parent li and then apply padding-left on "direct" child elements only, p and h2; and then Reposition secondul.
```
.custom-li {
  padding: 0;
}

.custom-li > p, .custom-li > h2 {
  padding-left: 100px;
}

.custom-li .ui-listview {
  margin-top: 34px;
}
```
Demo

JQM - How to use space under thumbnail in listview

1 Answers1