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;
}
Related
I have tried the following:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox" />
</div>
but it shows the flipswitch on the left, under the h1
HTML
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<div class="switch">
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox"/>
</div>
</div>
CSS
.switch
{
position: absolute;
top: 0px;
right: 0px;
}
JSFiddle
Using Cordova (phonegap) & bootstrap to make a mobile application, testing on IOS for now.
Getting an issue with a header and footer bar that are fixed with scrollable content in the middle. When tapping to scroll, the header/footer bar moves down or up with the content but then snaps back to place as soon as the scrolling completes. If I use
-webkit-overflow-scrolling: touch;
it works as expected, but it makes it really awkward to scroll through the content, and if you scroll passed the end, it only scrolls the header or footer (with elastic overflow) until you stop for a second.
here's my html for the header/footer bars:
<div id="headerBar">
<div class="container-fluid" style="background-color: #1569C7">
<div class="row">
<div class="col-xs-3 text-left">
<button id="logoutButton" type="button" class="btn btn-default">
Log Out
</button>
<button type="button" class="btn btn-default" id="restoreQuestionFeedButton">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="col-xs-6 text-center" style="height: 55px">
<strong id="usernameText"></strong>
</div>
<div class="col-xs-3 text-right">
<button id="oldCreatQuestionButton" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</div>
</div>
<div id="footerBar">
<div class="container-fluid" style="padding: 0">
<div class="row text-center">
<button id="createQuestionButton" type="button" class="btn btn-default footerButton">
<span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong>
</button>
</div>
</div>
</div>
And here is the related CSS:
#headerBar {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
background-color: #1569C7;
}
#footerBar {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
background-color: #1569C7 !important;
}
In my case, I fixed this bug by removing "top: 0" after "position: fixed"
And it's fix!
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 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>
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 -->