0

I tried creating a listview with listitems that have a button on the right side. Just like a jQuery Mobile split button listview, but only the right button should be clickable. The left part should contain a label together with a text input.

I found this answer: https://stackoverflow.com/a/15292521/2026623

But the class used in this answer was removed/renamed in jQuery mobile 1.4.0. I found out that some of the properties are now in .ui-btn-a but not all.

So I tried implementing it myself (having little knowledge of CSS). This is what it looks 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}*/;
}

And this is what it looks in action: http://jsfiddle.net/MasterQuestMaster/QJ9m2/

There are 2 problems with this solution and I hope someone can help me solving them.

  • If you enter the text field, the blue shine gets cut off by the border of the -Tag. I think this is because of the padding I added to .readonly-li-a.
  • The text input is not aligned correctly (the label is though)

Or maybe somebody even has tried this before me and found a better solution. If so, please post it.

Community
  • 1
  • 1
Manuel Hoffmann
  • 539
  • 1
  • 7
  • 23
  • 1
    for the split-btn remove all `data-` and replace them with classes, ``. for the rest of issues, you have to play around until you get what you want http://jsfiddle.net/Palestinian/4MYES/ – Omar Jan 27 '14 at 21:37

2 Answers2

1

Do you have to use jQuery mobile for the styling? Might be easier if you assigned data-role='none' to your input boxes and styled everything separately in your CSS. I've done this on projects just because trying to get jQuery mobile to behave can be a little difficult.

Jeff
  • 195
  • 9
  • I don't think I have the skills to do this. I'd only go for that if it is the only possible way. – Manuel Hoffmann Jan 27 '14 at 20:49
  • If you add a little padding, around 3px, to your `.readonly-btn-a` class you should be able to get the halo effect to work. The elements do not line up because you have 3 elements in one list item and 2 in the other. To get them to line up, maybe set the Link label to have an auto width and a right margin of 5%? – Jeff Jan 27 '14 at 21:29
  • I figured out problem one myself by assigning all the passing to .readonly-btn-a instead of .readonly-li-a. But "width: auto" only widens the gap. I tried setting the margin to higher values, but everything above 16% simply makes the textbox go into the next line. – Manuel Hoffmann Jan 27 '14 at 21:47
  • 1
    Ok this should work. Add the following classes to your CSS: `.ui-field-contain>label+[class*=ui-] { width: 72% !important; } .ui-listview>li.ui-li-has-alt>.ui-btn { margin-right: 0 !important; }` See fiddle: http://jsfiddle.net/F5XFP/ – Jeff Jan 27 '14 at 22:25
  • That really works, thanks. :) Is it possible to always have the same distance from text input to link on the right? Because the way it is now, it uses up a lot of free space on the right when the site enters the "split-in-2-lines" mode. – Manuel Hoffmann Jan 28 '14 at 21:43
  • Add these classes: `.ui-mobile label { display: inline-block; width: 20%; } .ui-field-contain>label+[class*=ui-]{ width: 72% !important; display: inline-block; }` Updated fiddle: http://jsfiddle.net/F5XFP/5/ The problem being now is that your CSS is very bloated. I understand if you don't feel confident yet in styling your elements yourself, but I highly suggest you at least try and sandbox a solution, even if it's not the solution you implement. – Jeff Jan 28 '14 at 22:01
  • I just realized ezanker's answer already provided a solution for this. But thanks anyway. – Manuel Hoffmann Jan 28 '14 at 22:03
1

With a slight change in markup, I believe you can do this with 2 CSS rules. The existing ui-li-static and ui-body-inherit classes take care of the LI, so you only need a margin rule to line up the inputs and a class for the readonly-btn-a:

<ul data-role="listview" data-inset="true">
    <li>
        <div class="ui-field-contain">
            <label>Normal:</label>
            <input type="text" id="normal" name="normal"/>
        </div>
    </li>
    <li class="ui-li-static ui-body-inherit">
        <a href="#" class="readonly-btn-a" >
            <div class="ui-field-contain">
                <label>Link:</label>
                <input type="text" id="link" name="link"/>
            </div>
        </a>
        <a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-inline"></a>
    </li>
    <li>
        <div class="ui-field-contain">
            <label>Normal:</label>
            <input type="text" id="normal2" name="normal2"/>
        </div>
    </li>
</ul>

li .ui-field-contain {
    margin-right: 42px; !important;
}
.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;
    border: none !important;
    padding: 0 !important;
    margin: 0!important;
}

Here is an updated FIDDLE (based on Jeff's GOOD answer)

UPDATE: for less padding within the LI elements add:

.ui-listview>.ui-li-static {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Updated DEMO

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • That's awesome, but the wide space between the "li"s does bother me a little. Is this because of .ui-body-inherit? – Manuel Hoffmann Jan 28 '14 at 21:20
  • yes, here is an update with better spacing: http://jsfiddle.net/ezanker/F5XFP/4/, all i did was add .ui-listview>.ui-li-static { padding-top: 0 !important; padding-bottom: 0 !important;} (answer has been updated). – ezanker Jan 28 '14 at 21:49
  • Thanks, it seems your answer also does what Jeff's solution failed to provide: constant space between text input and link. (although this wasn't even required until now so I can't blame him) – Manuel Hoffmann Jan 28 '14 at 21:57