Personalize ListView item in JQuery Mobile

Question

Is there a way to personalize ListView Item like in the picture, I want to add 2 button ( 1 and 2 in the picture ) and I want to remove the white space (3 in the picture )

this is the code of my List view item

<li data-icon="false"><a href="index.html">
  <img src="images/bureau.jpg">
  <h2>Avery Walker</h2>
  <p><strong>Re: Ce soir dîner</strong></p>
  <p class="ui-li-aside"><strong>50</strong>£</p>
  <p class="ui-li-count"><strong>5</strong></p>
</li>

If you have any idea to make it please tell me, thanks in advance

Answer 1

You can use CSS and absolute positioning to place the buttons as you desire. I have assigned a class of myCustomUL to the listview and then within the listitems, I add an absolutely positioned div with a class of cust-btns. The div includes the up and down buttons and the count.

<ul data-role="listview" data-inset="true" class="myCustomUL">
    <li data-icon="false"> 
        <a href="index.html">
            <img src="http://lorempixel.com/80/80/food/1/" />
            <h2>Avery Walker</h2>
            <p><strong>Re: Ce soir dîner</strong></p>
            <p class="ui-li-aside"><strong>50</strong>£</p>                     
        </a>
        <div class="cust-btns"> 
            <a href="#" class="ui-btn ui-btn-inline ui-icon-carat-u ui-btn-icon-notext ui-corner-all">Icon only</a>
            <p class="ui-li-count"><strong>5</strong>
            </p> <a href="#" class="ui-btn ui-btn-inline ui-icon-carat-d ui-btn-icon-notext ui-corner-all">Icon only</a>
        </div>
    </li>
</ul>

Here is the CSS. The first rule affects the distance between the text and the buttons on the right, so tweak to your taste. The remaining rules place the buttons.

.myCustomUL li > a {
    padding-right: 56px !important;
}
.myCustomUL .cust-btns {
    position: absolute;
    top: 0px; width: 39px;
    bottom: 0px; right: 0px; left: auto;
}
.myCustomUL .cust-btns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 10px;
}
.myCustomUL .cust-btns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 10px;
}
.myCustomUL .cust-btns .ui-li-count {
    top: 50%;
    margin-top: -10px;
    left: 4px;
    right: auto;
}

Here is a DEMO