CODEWITHSUNDEEP
htmljquery-mobile
roy mathew
roy mathew

Reputation: 7800

Putting two colours in listview

I have created a list view in JQuery mobile with 2 grids. And I need to set background color to only 1 grid (block-a) but doing so, the padding of the list view is being displayed as white. I need to set color for the padding also. I need the first half to have one colour and second half to have different colour. Thanks in advance.

<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-theme="none">
            <li data-role="list-didvider" >
               <a href="#">
                  <div class="ui-grid-a" data-theme="none">
                      <div class="ui-block-a">Distance</div>
                      <div class="ui-block-b">Places</div>   
                 </div>
               </a>
            </li>
      </ul>
  </div>
</div>

Upvotes: 1

Views: 105

Answers (2)

DaKirsche
DaKirsche

Reputation: 352

Your padding is already colorized so far, but the margin isn't. You need to remove the margin and set a padding:

ul li {
    padding-left: 10px;
    margin-left: 0px;
}

Then your background color will be set with the space before your items content.

Upvotes: 1

Akki619
Akki619

Reputation: 2432

You need to customize css in jQuery.

Like for example 

.ui-grid-a .ui-block-a { customization goes here }

.ui-grid-a .ui-block-b { customization goes here }

I have set up a sample jsFiddle, it will get you started.

http://jsfiddle.net/Akki619/z3BQ2/

The fiddle may not provide the exact solution you are looking for but you can always play along for desired results.

In your case: You need to customize data-theme a/c to your need.

It might be a tricky to get the desired result as you want.

Upvotes: 1

Related Questions