I was attempting to create a listview with list items that have a button on the right side, much like a jQuery Mobile split button listview. However, I only want the right button to be clickable. The left part of each item should contain a label along with a text input field.
In my search for a solution, I came across this helpful answer:
Unfortunately, the class used in the provided answer was removed or renamed in jQuery Mobile 1.4.0. Some properties can now be found in .ui-btn-a, but not all of them.
With limited CSS knowledge, I decided to try and implement it myself. Here is what I have so far:
HTML:
<li class="readonly-li-a">
<a class="readonly-btn-a ui-field-contain">
<label for="boss">Boss:</label>
<input type="text" id="boss" name="boss">
</a>
<a data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext"></a>
</li>
CSS:
.readonly-btn-a {
background: #fff!important /*{a-bup-background-color}*/;
color: #333!important /*{a-bup-color}*/;
text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
cursor: default !important; /* don't change to hand cursor */
border: none !important;
}
.readonly-li-a {
border: 0 solid #ddd !important;
border-top-width: 1px !important; /*the line above the li */
padding: .7em 1em !important; /*copied from .ui-li-static */
background: #fff!important; /*white background instead of grey*/
margin: 0 1px!important; /*the li stands out by 1px left/right without this*/
-webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
-moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
box-shadow: 0 1px 3px /*{global-box-shadow-size}*/ rgba(0,0,0,.15) /*{global-box-shadow-color}*/;
}
To see it in action, you can check it out here: http://jsfiddle.net/MasterQuestMaster/QJ9m2/
However, there are two issues with this current solution that I need help addressing:
- When you enter text into the field, the blue shine effect gets cut off by the border of the <a> tag. This could be due to the padding added to .readonly-li-a.
- The text input is not aligned correctly, although the label is positioned correctly.
If anyone has encountered these problems before or has a better solution, please share your insights. Your help would be greatly appreciated.