I have the following listview with text boxes. I wanted to get the same feel as the ipad.
How do I align the text boxes so are right below one another. Currently it looks mismatched.
<ul data-role="listview" data-inset="true" style="width:30%;">
<li data-role="fieldcontain">
<label for="name">First Name:</label>
<input type="text" name="fname" id="fname" value="" />
</li>
<li data-role="fieldcontain">
<label for="name">MI:</label>
<input type="text" name="mi" id="mi" value="" style="width:5%;" />
</li>
</ul>
Don't know why you needed to set style for ul and input tags.
But I have put together a fiddle with different styling you can achieve.
http://jsfiddle.net/nachiket/nnRPv/
Does any one of it helps?
Related
I'm implementing jquerymobile themes via themeroller shared. I have applied two swatches a and b buttons are blue but flip switch is orange.
How can I apply both themes in one page?
I have tried this:
<fieldset data-role="controlgroup">
<div class="ui-field-contain">
<label for="txtEmail" class="ui-hidden-accessible"></label>
<input name="txtEmail" id="txtEmail" placeholder="Email" value="" type="text" data-clear-btn="true" data-theme="a" />
</div>
<div class="ui-field-contain">
<label for="txtPassword" class="ui-hidden-accessible"></label>
<input name="txtPassword" id="txtPassword" placeholder="Password" value="" type="password" data-clear-btn="true" data-theme="a" />
</div>
<div class="containing-element" >
<label class="fliplabel" for="flipRemember">Remember me:</label>
<select id="flipRemember" name="flipRemember" data-role="slider" data-theme="b" >
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div class="ui-field-contain" class="fieldbutton">
<a id="btnSignin" data-theme="a" data-role="button" data-theme="a" href="javascript:void(0);">Sign In</a>
</div>
</fieldset>
What you've got there should work. You'll need to include the jquerymobile.js and jquerymobile.css, as well as your theme's css file. Aside from that, you can apply theme directly to parts of a page (either jquerymobile controls, or general page elements) by using the theme related css classes such as ui-body-b (shown here at the bottom of the page). I've put together a jsfiddle as well to give an example
I work on mobile app using and phonegap , the app have JqueryMobile listview with many items
(more than 20 items li ) and every li have textbox and 3 radio buttons , when i try to create and refresh listview using this code :
$("#ListView").trigger('create').listview().listview("refresh");
It takes 15 second to create the listview .
any one know how i can speed the create of listview with many items?
below handelbar template that i used to populate listview:
<ul data-role="listview" data-inset="true" id="lstQuestions">
{{#each Data}}
<li data-role="fieldcontain" >
<label >{{DOrder}} - {{Title}}</label>
<fieldset data-role="controlgroup" data-type="horizontal" >
<input type="radio" name="rdo-{{ID}}" id="rdo-{{InspectionID}}-{{ID}}-3" value="3" data-theme="c" />
<label for="rdo-{{InspectionID}}-{{ID}}-3">Nothing</label>
<input type="radio" name="rdo-{{ID}}" id="rdo-{{InspectionID}}-{{ID}}-2" value="2" data-theme="c" />
<label for="rdo-{{InspectionID}}-{{ID}}-2">No</label>
<input type="radio" name="rdo-{{ID}}" id="rdo-{{InspectionID}}-{{ID}}-1" value="1" data-theme="c" />
<label for="rdo-{{InspectionID}}-{{ID}}-1">Yes</label>
</fieldset>
<fieldset data-role="controlgroup" class="fieldsetClass">
<label for="txt-{{ID}}">Comment</label>
<input type="text" id="txt-{{ID}}" name="txt-{{ID}}" value="{{Comment}}" />
</fieldset>
</li>
{{/each}}
</ul>
Qudah. I'm have been develop app with phonegap an jQuery Mobile. In jQuery Mobile, listview is very very slow. If have many item then ever never use listview. Solution: you should rewrite listview and ignore data-role="listview", your app will faster.
<ul>
<li>
<li>
</ul>
//very faster than
<ul data-role="listview">
<li>
<li>
</ul>
I need to put an icon next to text field in jquery mobile.
<div data-role="fieldcontain">
<label for="card">Verification Number</label>
<input data-mini="true" type="text" name="card" id="card">
<a href="card.png">
<img src="questionicon.jpg">
</a>
</div>
First of all you have unclosed tags in your html code.
you have to close all the tags for the code working without errors.
the img and input tag are not close.
Here is a working Fiddle Demo for your needs
Have change a little bit your html code:
<div data-role="fieldcontain" id="myfield">
<label for="card">Verification Number</label>
<ul>
<li>
<input type="text" name="card" id="card"/>
</li>
<li>
<a href="#">
<img src="image.jpg" width="20px" height="20px" id="myimage"/>
</a>
</li>
</ul>
</div>
I would like to do a nice layout table like that: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-forms-inset.html
Text label on the left and then input/information aligned on the right.
When I insert inputs, selects, etc. it is aligned correctly on the right. However I am not sure how to insert simple text so it is aligned correctly on the right. Is there a <> tag I need to surround my text with so it is correctly aligned?
Thank you for your help.
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li data-role="fieldcontain">
<label for="textarea">Textarea:</label>
THE TEXT I WOULD LIKE TO SEE RIGHT-ALIGNED.
</li>
</ul>
Here is an example: https://tinker.io/71d3c/1
You should add a class ui-input-text like this:
<label for="textarea" class="ui-input-text">Textarea:</label>
THE TEXT I WOULD LIKE TO SEE RIGHT-ALIGNED.
Here's an example: http://jsfiddle.net/YA8f6/
EDIT:
And here's an example with right alignment: http://jsfiddle.net/DqD7X/
Putting radio buttons in a fieldset with data-role="controlgroup", jquery-mobile renders them like an inset list, but the legend is simply text. I would like the legend to look like the list dividers of a list view.
So instead of this:
I would like something like that:
You could put the radiogroup inside of a listview, and use the listdivider style for the title. To get to a result which is similar to what you demonstrated, you need to remove some padding, margins and borders.
See this example: http://jsfiddle.net/zdMhF/
The code:
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Choose a pet:</li>
<li style="padding:0;border:0;">
<div data-role="fieldcontain" style="margin:0;">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>
</li>
</ul>
</div>
</div>