CODEWITHSUNDEEP
jquerycssjquery-mobilecustomization
Manuel Hoffmann
Manuel Hoffmann

Reputation: 547

jQuery Mobile 1.4.0 split button, right button only CSS

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.

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

Upvotes: 0

Views: 735

Answers (2)

ezanker
ezanker

Reputation: 24738

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

Upvotes: 1

Jeff
Jeff

Reputation: 305

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.

Upvotes: 1

Related Questions