I want to show two date in a row with jquerymobile. But it only works in Desktop browser. In mobile browser will in independed row.
<div data-role="fieldcontain">
<label for="time_start" class="ui-hidden-accessible">time_start:</label>
<label for="time_end" class="ui-hidden-accessible">time_end:</label>
<input type="date" name="time_start" value="2011-05-30" /> — <input type="date" name="time_end" value="2011-05-30"/>
</div>
Have you tried putting the labels and the input inside a span?
Float:left and width:80 (for example) should do the trick for you. Here is an example in both small buttons and large ones.
http://jsfiddle.net/den232/SN85d/
Good luck!
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
Big Buttons<br>More Text
</div>
<div class='floatleft textwidth'>
<input type="date" placeholder="#1" class='biginputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="date" placeholder="#2" class='biginputheight'></input>
</div>
</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
Small Buttons
</div>
<div class='floatleft textwidth'>
<input type="date" placeholder="s1" class='miniinputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="date" placeholder="s2" class='miniinputheight'></input>
</div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->
maybe you can achive it using grids
<div class="ui-grid-a">
<div class="ui-block-a"><label for="time_end" class="ui-hidden-accessible">
time_end: </label>
<div class="ui-block-b"><label for="time_end" class="ui-hidden-accessible">
time_end: </label>
</div>
Related
Hi i'm working on Mobile app. I want these 3 buttons to align vertically one below the other. what happens is , once i put them in a div (with class="footer") , the button width size changes automatically.
<div class="footer" data-role="footer" data-id="fixedFooter" data-position="fixed" style="display:none;" >
<div style="text-align:center; width:100%;">
<input type="button" value="Button">
</div>
<div>
<input type="button" value="submit">
</div>
<div>
<input type="button" value="cancel">
</div>
You need something like this: http://jsfiddle.net/Gajotres/a5USz/
HTML:
<div data-role="footer" data-position="fixed">
<div class="button-holder">
<input type="button" value="Button"/>
</div>
<div class="button-holder">
<input type="button" value="submit"/>
</div>
<div class="button-holder">
<input type="button" value="cancel"/>
</div>
</div>
CSS:
.button-holder {
text-align:center;
width:100%;
}
.button-holder .ui-btn {
width: 100% !important;
}
Add margin: 0 if you want to make them side by side, like this:
.button-holder .ui-btn {
width: 100% !important;
margin: 0 !important;
}
Can you please tell me how to resize the text area? Actually the problem is that I open the pop up screen on button click. In my pop up screen I have one text area (having small area).
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
I write many characters on that text area and than close it. Again I open this and it has the same area that was before closing(large area)? How to resize that text area so that it starts with same starting size.
My code:
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b"> Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div>
<img src="img/Documents.png" />
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
</div>
<div data-role="fieldcontain">
<label for="caseDate" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h">
<!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Case Notes :</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/7JqRG/3/
Just use this CSS:
#text-12 {
width: 100% !important;
height: 50px !important;
max-height: 50px !important;
}
It will lock textarea height. !important must be used to override default values.
$('#text-12').css('width','whatyouwant');
or
$('#text-12').attr('cols','whatyouwant'); //for the width
$('#text-12').attr('rows','whatyouwant'); //for the height
I have this page in jquerymobile running in .net MVC4
<div data-role="header" data-theme="b" data-position="fixed">
<h3 style="color:white;">
Name
</h3>
Back
<div data-role="fieldcontain" class="test_row">
<fieldset data-role="controlgroup" data-type="horizontal" class="test_row">
<input id="radio3" name="testType" value="2" type="radio" checked="checked" class="test_type">
<label for="radio3" class="test_type">All tests</label>
<input id="radio1" name="testType" value="0" type="radio" class="test_type">
<label id="test_type_label" for="radio1" class="test_type" >Automated</label>
<input id="radio2" name="testType" value="1" type="radio" class="test_type">
<label for="radio2" class="test_type">Manual</label>
</fieldset>
</div>
</div>
CSS
.test_row .ui-btn {
text-align: center;
}
.ui-field-contain .ui-controlgroup-controls {
width: 100%;
}
.ui-controlgroup-controls .ui-radio {
width: 33.3%;
}
http://jsfiddle.net/ruds5/jsfiddle
When you resize the result, middle word (Automated) is truncated into shorter form with '...' at the end.
Is it possible to prevent truncating at the end of the word?
Based on the updated question, here is the solution. The text style is wrapped with a with class .ui-btn-inner, button text style is overidden as follows.
span.ui-btn-inner {
white-space: nowrap !important;
overflow: visible !important;
}
Demo JSfiddle
Omar was correct with previous version of Jquery mobile. But with version 1.4.1 there is no more span, use:
.ui-btn-inline {
white-space: nowrap !important;
overflow: visible !important;
}
In JQuery Mobile, I am trying to group buttons with an input box in the middle.
Below is my code
<div data-role="controlgroup" data-type="horizontal">
Yes
<input type="text" value="0" min="0" max="20" size="2" />
Maybe
</div>
This is the result
Any ideas would be great?
The radio buttons need an aggressive case of display:inline !important; ... Here is a list with 2 lines, one normal buttons and one mini's.
Hope it helps. http://jsfiddle.net/den232/5mVv8/
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">A1</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">B1</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="left" class='biginputheight'></input>
</div>
</li>
<li data-role="fieldcontain">
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">AA</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">BB</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="e2" class='miniinputheight'></input>
</div>
<div class='floatright closespacing'>
<div class='floatright textwidth'>
<input type="text" placeholder="e3" class='miniinputheight'></input>
</div>
</div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->
By default buttons take up the entire width of the view port. Try using the data-inline attribute to change that.
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-inline.html
You'll also need some css to get the input looking right. The following seemed to work for me. You'll probably need to adjust the width depending on what you're going for.
input.ui-input-text {
float: left;
position: relative;
display: inline-block;
width: 50%;
}
This solution works for me and hope it helps someone else seeking the same.
.controlgroup-textinput{
padding-top:.22em;
padding-bottom:.22em;
}
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
Yes
<input type="text" value="0" min="0" max="20" size="2" data-wrapper-class="controlgroup-textinput ui-btn" />
Maybe
</fieldset>
I am trying form design in jquery mobile. In my form i want to show two radio buttons on same line. I try to use display: inline but not working.
Second one I searched in jquery mobile documentation for showing phone number field with three text field(separating the phone number) but i didn't get any design like this. Any suggestions to how to do this in jquery mobile.
I think the solution you are looking for maybe involving Content Grids.
Documentation: http://jquerymobile.com/test/docs/content/content-grids.html
I have mocked up some HTML for doing this for radio buttons and text boxes, but your situation may be a little different.
Take a look at this example: http://jsfiddle.net/shanabus/XxB6Y/
Also, check out this documentation page for text inputs for (telephone) numbers:
In jQuery Mobile, you can use existing and new HTML5 input types such
as password, email, tel, number, and more.
From here: http://jquerymobile.com/test/docs/forms/textinputs/
I found the solution to how to get phone number with three text field like xxx-xxx-xxxx.
Demo: http://jsfiddle.net/XxB6Y/1/
Radio buttons need very aggressive display:inline !important; ... In addition you have to fiddle with the heights of those text boxes to make them align nicely. Here is two versions for you, one with normal buttons and the other with the minis.
http://jsfiddle.net/den232/bVF3B/
Good Luck!
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
Big Buttons<br>More Text
</div>
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">A1</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">B1</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="#1" class='biginputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="#2" class='biginputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="#3" class='biginputheight'></input>
</div>
<div class='floatright textwidth'>
<input type="text" placeholder="right" class='biginputheight'></input>
</div>
</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
Small Buttons
</div>
<div data-role="fieldcontain" class= 'forceinline'>
<div class='floatleft closespacing'>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
<input type="radio" name="radio-view" id="radio-view-a" value="aa" />
<label for="radio-view-a">AA</label>
<input type="radio" name="radio-view" id="radio-view-b" value="bb" />
<label for="radio-view-b">BB</label>
</fieldset>
</div>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="s1" class='miniinputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="s2" class='miniinputheight'></input>
</div>
<div class='floatleft textwidth'>
<input type="text" placeholder="s2" class='miniinputheight'></input>
</div>
<div class='floatright closespacing'>
<div class='floatright closespacing'>
e3 Text<br>on right
</div>
<div class='floatright textwidth'>
<input type="text" placeholder="e3" class='miniinputheight'></input>
</div>
</div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->