Question

This is what I have right now: http://jsfiddle.net/w6PAC/3/

I want the select button to the right of the count, without it affecting the vertical size and alignment of the list item.

I have tried:

1. creating CSS based on the .ul-li-count class but only managed to break the jQM enhancement.
2. creating the buttons separately outside the listview but I was unable to align them vertically.
3. playing about with fieldsets, data-roles, divs, etc with no success.

AFAIK it is not possible to invoke a select programmatically otherwise I would add a plain button to the listview.

Any help greatly appreciated, including suggestions for alternative document layouts.

Answer 1

If I understand correctly then you can use some pretty simple CSS to alter jQuery Mobile’s default layout:

/*absolutely position the <select> to the right side of the <li> and center it within the <li>*/
.custom_list .ui-select {
    position   : absolute;
    right      : 10px;
    top        : 50%;
    margin-top : -1.4em;
}
/*add some extra padding to the right side of the <li> to make the text wrap properly*/
.custom_list .ui-li {
    padding-right : 80px;
}
/*change the position of the <span class="ui-li-count"> to make room for the <select>*/
.custom_list .ui-li-count {
    right : 50px;
}

Note that I am using the .custom_list class to target the desired <ul> element so for this solution to work properly you must remove .custom_list from the CSS declarations above or add the .custom_list class to the <ul> element you want to customize.

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/w6PAC/4/