CODEWITHSUNDEEP
htmlcsslistviewjquery-mobile
Joetjah
Joetjah

Reputation: 6132

Splitting JQuery Mobile Listview in more rows

I know I can split up the rows in a Listview vertically by creating blocks like so:

<li >
    <div class="ui-grid-b">
        <div class="ui-block-a">Block A</div>
        <div class="ui-block-b">Block B</div>
        <div class="ui-block-c">Block C</div>
    </div>
</li>

Is there a horizontal way to do this? For example, I have a picture, and I'd like to add two rows next to that. To make things clear, I've added a HD quality example:

enter image description here

Upvotes: 3

Views: 306

Answers (2)

Omar
Omar

Reputation: 31732

To have blocks stacked aboved each others, give them 100% width.

HTML

<ul data-role="listview">
  <li>
    <a href="#">
      <img src="" />
      <div class="ui-grid-b">
        <div class="ui-block-a">Block A</div>
        <div class="ui-block-b">Block B</div>
        <div class="ui-block-c">Block C</div>
      </div>
    </a>
  </li>
</ul>

CSS

.ui-block-a, .ui-block-b, .ui-block-c {
    width: 100% !important;
}

Demo

Upvotes: 2

ezanker
ezanker

Reputation: 24738

Have you tried something like this:

<li>
    <a href="index.html">
        <img src="img url" />
        <h2>Home 1</h2>
        <p>A peaceful home</p>
        <p><strong>With large garden</strong></p>      
    </a>
</li>

Upvotes: 2

Related Questions