I figured out how to solve this.
Basically I added content in a separate div and the 3 actions in a div with float:right
with a ui-grid-. To align vertically properly, I added some margin.
I adjusted the sample, I left the original code in the top <ul>
, the new code in the <ul>
underneath.
http://jsfiddle.net/qN7P6/1/
<ul data-role="listview">
<li style="height:28px;">
<div>adjusted content</div>
<div class="rightbuttons">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:62%;">
<label data-inline="true"><input type="checkbox" data-inline="true" />Enable</label>
</div>
<div class="ui-block-b" style="width:38%; margin-top:5px;">
<a id="edit1" href="" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Delete</a>
<a id="delete1" href="" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Edit</a>
</div>
</div>
</div>
</li>
</ul>
css:
.rightbuttons {
float:right;
width:210px;
margin-top:-36px;
}
I know, all style attributes should be moved to the css to clean things up. But I'll leave that for the reader.