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/
Related
I am using JQM datebox but I cannot get it to show several date inputs in a single row. This is the closest I've got:
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<label for="fromDate">
From
</label>
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
<label for="toDate">
To
</label>
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</fieldset>
And it sets the width properly but keeps putting it into a new line:
Also, the date shown in the flipbox does not match the one actually selected (check the date on the title):
Plus the dialog is shown too much to the left and it gets cropped.
Any help please?
I have a solution that just uses DIVs and CSS outside of the jQM data-roles. Here is a DEMO
Basically, instead of fieldcontain and controlgroups, I have contained each label/date input pair in a DIV set to display inline instead of block. Then the label and input are each also in DIVs set to inline with min-widths. In this way:
if your screen is wide enough, everything is displayed in one line.
as your screen narrows, the second label/input pair rolls to the next
line
as your screen narrows even more the labels also stack on top of the
inputs.
In the fiddle, try dragging the splitter to the left of the results plain to see the form automatically configure itself to the available width.
So the HTML looks like this:
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="fromDate">From</label>
</div>
<div class="dispInline">
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
</div>
</div >
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="toDate">To</label>
</div>
<div class="dispInline">
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</div>
</div>
<!-- Clear floats for each new line -->
<div class="clearFloats"></div>
And the CSS looks like this:
.dispInline, .dispInlineLabel, .dispInlineCont{
display: inline-block;
border-bottom-width:0;
}
.dispInlineLabel{
min-width: 55px;
}
.dispInline{
min-width: 200px;
}
.clearFloats{
clear:both;
}
Of course you can mess with the min-widths to get the behavior you want. The ClearFloats allows you to add the next controls on the next line.
I am getting started with JQueryMobile and love it. I am wondering if there is a way to place a prepended a select menu beside a standard text input.
For example, if the text input were to be for a name, then the prepended select would contain Mr, Mrs, etc.
Edit 1:
I've looked at the control group docs and for a case like buttons it works e.g.
<div data-role="controlgroup" data-type="horizontal">
Icon only
Icon only
</div>
However if I use an input like
<div data-role="controlgroup" data-type="horizontal">
Icon only
<input type = "text" name = "some_input" id = "some_input">
</div>
It gives a weird result with the input overlapping the button.
Edit 2:
I've looked at grids but cannot see a way to have a div span 2 grids. e.g.
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>
I've tried the above, but it doesn't work as desired, for example
<div class="ui-grid-c">
<div class="ui-block-a">
<label for = "full_name">
Name
<select id = "honorific" data-mini="true" data-inline="true">
<option value = "mr">Mr</option>
<option value = "mrs">Mrs</option>
<option value = "miss">Miss</option>
</select>
</label>
</div>
<div class="ui-block-b ui-block-c ui-block-d">
<input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
</div>
</div>
simply yeilds the select box below the full name label, and the input only spans what appears to be one cell/block - rather than the 3 cells/blocks of the grid.
From what I've seen control group works best with buttons, check boxes, etc. Not with the combination you're expecting to do. So here are two solutions for you.
Without using grids
You'll just have to make the two elements as an inline-block, like this :
.ui-select, .ui-input-text {
display:inline-block
}
Demo with No grids, No control group.
Using grids
The way you're using grids is wrong. You'll have to use two-column grid, which will have these two two classes alone: ui-block-a & ui-block-b, like this :
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
</div>
This will scale your markup accordingly. Here's how the HTML looks like :
<div class="ui-grid-a">
<div class="ui-block-a" style="width:100px">
<select name="select-choice-min" id="select-choice-min" data-mini="true">
<option>Mr.</option>
<option>Mrs.</option>
<option>Ms.</option>
</select>
</div>
<div class="ui-block-b">
<input type="text" name="name" id="name" value="" placeholder="Enter Name" />
</div>
</div>
Demo with grids
How can I add a text box beside the label for checkbox using jquery mobile? It should be in one line (checkbox --> label (for checkbox) --> textbox)
If you want to add a label in the same line as its referencing element, like for example:
My legend [ ] Checkbox label
you may want to try using field containers, with data-role="fieldcontain".
For example:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
</div>
The code above will give you:
Agree to the terms: [] I agree
Check the online doc for more information: http://jquerymobile.com/demos/1.1.1/docs/forms/checkboxes/
Now, if you want to several elements on one line (= several elements in different columns), I mean more than just a label and its element, you may wanna check the jQuery Mobile's Layout grids: http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html
Considering your example case, I think you may want to try to use a combination of the 2 methods above. So, you may try something like this:
<div class="ui-grid-a">
<!-- FIRST COLUMN -->
<div class="ui-block-a">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
</div>
</div>
<!-- SECOND COLUMN -->
<div class="ui-block-b">
<input type="text"/>
</div>
</div>
Hope this helps.
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?
I'm using rightToLeft language for my UI, so I need to have label of textfield on right side. I tried using div with float:right for label and div with float:left for textfield. but it still doesn't align correctly in my form.
This is code sample:
<s:form action="processRegister" cssClass="form">
<div style="float:right;text-align:right">
<s:text name="label12.msg"/>
</div>
<div style="float:left">
<s:textfield name="username" cssClass="textfield" />
</div>
<div style="float:right;text-align:right">
<s:text name="label13.msg"/>
</div>
<div style="float:left">
<s:password id="password1" name="password" cssClass="textfield"/>
</div>
</s:form>
and when I used table and tried to put textfield on one column and label on the other column, they didn't align on one line.
In what way is it not aligning properly? can show us some screenshot and example of codings?
U wanna check your magin and padding of each field that is not aligning properly?
Make the margin and padding to 0 first.
Actually another way is to use a table, if it applies to you.
Inside individual cell, just make sure the padding/ margin is 0.
Then using the cell's alignment property to adjust the align problem.
From what I see, using table for form to align is definitely cross browser
This jsfiddle does what you want. The key is in clearing your floats so that all the input/label rows end up on their own distinct lines. It's also a good idea when using floats to specify widths on your elements whenever possible. This will prevent accidental float drop.
Also, for usability, I've added a <label> element so screen readers will know which <input>'s your labels apply to.
HTML
<form>
<div>
<label for="username">Username</label>
<input type="text" id="username" name="username" size="20"/>
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" size="20"/>
</div>
</form>
CSS
div {
clear: both;
width: 300px;
}
div label {
float: right;
text-align: right;
}
div input {
float: left;
}