I want to add some more text with a different style and in yellow.
Is there a way to do this inside checkbox?
for example:
<fieldset data-role="controlgroup" data-iconpos="right">
<input type="checkbox" name="checkbox-v-6b" id="checkbox-v-6b">
<label for="checkbox-v-6b">some text</label>
</fieldset>
I've tried to add another label but that didn't work...
Any suggestions?
Related
i've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
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
Can you please tell me how to add text field in front of label in jquery mobile .
There is two different types of text field in this image.How to implement this?
Just you have to copy simple code to your website...
For input box:-
<div data-role="fieldcontain">
<label for="text-12">Text input:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
For textarea:-
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
Keep that in mind the value of for="" and id="" of input box should be same...
For more details check out:- http://view.jquerymobile.com/1.3.1/demos/widgets/textinputs/
Use this code to add textfield
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="" />
Ref this docs to know more informations about JQM
http://jquerymobile.com/demos/1.2.1/docs/forms/textinputs/
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.