CODEWITHSUNDEEP
listviewjquery-mobilethumbnailsinsets
Donal Rafferty
Donal Rafferty

Reputation: 19826

JQM - How to use space under thumbnail in listview

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?

Upvotes: 1

Views: 213

Answers (1)

Omar
Omar

Reputation: 31732

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>

  1. Linked Listview:

    You only need to reposition link icon of parent li.

    .custom-li .ui-icon-arrow-r {
  top: 20% !important;
}

    Demo

  2. 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

Upvotes: 1

Related Questions