Geek Answers Handbook

Single line input / input field using jQuery mobile CSS

I'm trying to display a list of tags and inputs using JQuery Mobile so that the results look something like the settings on the iPhone, for example, the tag is left aligned and the input is right aligned on the same line. The only way I was able to do this was to use tables, which in my opinion are bad practice?

What will align CSS without tables be?

   <ul data-role="listview" data-dividertheme="e">
                <li data-role="list-divider">Seamless List (margin-less)</li>
                <li>
                    <table style="width:100% ">
                        <tr>
                            <td style="width: 50%">
                                Foo1
                            </td>
                            <td style="width: 50%">

                                <input type="number" value="20000" style="text-align: right" 
                                id="Foo1Input" />

                            </td>
                        </tr>
                    </table>
                </li>
+5
source share
3 answers

You can try something like this: http://jsfiddle.net/7Layw/1/ .

HTML

<div id="listWrapper">
    <div class="leftItem">
        Foo1
    </div>
    <div class="rightItem">
        <input type="number" value="20000" style="text-align: right" 
        id="Foo1Input" />
    </div>
    <div class="leftItem">
        Foo2
    </div>
    <div class="rightItem">
        <input type="number" value="20000" style="text-align: right" 
        id="Foo1Input" />
    </div>
</div>

CSS

.leftItem {
    clear: both;
    float: left;
    width: 50%;
}

.rightItem {
    float: left;
    width: 50%
}

, , div leftItem rightItem.

, !

+2
<div data-role="fieldcontain">
    <label for="customField">Hello</label>
    <input type="text" name="customField" id="customField" value=""  />
</div>

use field content

+2
source

More articles:


All Articles