<div data-role="fieldcontain" style="font-size: 84%" > <!-- style="width: 48% ; float: right" -->
<fieldset data-role="controlgroup" data-type="horizontal" data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength -->
<legend style="text-align: center ; ">גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" data class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
Jquery Mobile Radio buttons:
in the exmaple above I've managed to fit the horizontal radio buttons to exactly fit by trial and error.
How could it be done in code???
I assume you want the CSS the get the controlgroup looking like the image ?
If so, here is your HTML with all styles removed and some typos fixed:
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<legend >גודל</legend>
<input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/>
<label for="radio-view-a" >גדול: 10.50 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
<label for="radio-view-b" >בינוני: 6.30 ₪</label>
<input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" />
<label for="radio-view-c" >קטן: 5.70 ₪</label>
</fieldset>
</div>
I added an ID to the fieldcontain so we could limit the CSS rules to things in this container:
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
DEMO
You should add data-inline="true". Check the demos for radio buttons on the jQuery Mobile site.
Related
I need to fix the header when focusing the input and select fields. We are successfully fixed the header in android and windows environment. But in iPhone we are facing the below issue please see in screen shots 2 and 3
We are using jquerymobile 1.4.0
Please any one help me we are trying this issue almost one month still we are not resolved this issue.
screen shot-1
screen shot-2
screen shot-3
(function(){
var targetElem = $('.fixedElement'), // or more than one
$doc = $(document),
offsetY, scrollY, changeY;
if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
return;
$doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);
function bind(){
$(window).on('scroll.iOSKeyboardFix', react);
react();
}
function react(){
offsetY = targetElem.offset().top;
scrollY = $(window).scrollTop();
changeY = offsetY - scrollY;
targetElem.css({'top':'-'+ changeY +'px'});
// Instead of the above, I personally just do:
// targetElem.css('opacity', 0);
$doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
.on('touchend.iOSKeyboardFix', unbind);
}
function unbind(){
targetElem.removeAttr('style');
document.activeElement.blur();
$(window).off('scroll.iOSKeyboardFix');
$doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
}
})();
[data-role="page"] {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.ui-header {
position: fixed !important;
top: 0px !important;
right:0px;
left:0px;
text-align: center;
z-index: 1000;
width: 100%;
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important;
font-weight: normal;
opacity: 1 !important;
}
.ui-footer {
position: fixed !important;
bottom: 0px !important;
right:0px;
left:0px;
text-align: center;
z-index: 1000;
width: 100%;
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important;
font-weight: normal;
opacity: 1 !important;
}
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<div id="header" data-role="header" data-hide-during-focus="false" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" class="ui-header" style="position:fixed;-webkit-overflow-scrolling: touch;right:20px;bottom:20px;-webkit-backface-visibility: hidden;">
<h3>Header</h3>
</div>
<label for="text">Text Input:</label>
<input type="text" name="text" id="text1">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text2">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text3">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text4">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text5">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text6">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text7">
<select name="select" id="select1">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
<option value="option5">Option5</option>
<option value="option6">Option6</option>
<option value="option7">Option7</option>
<option value="option8">Option8</option>
<option value="option9">Option9</option>
<option value="option11">Option11</option>
<option value="option22">Option22</option>
<option value="option33">Option33</option>
<option value="option44">Option44</option>
</select>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
<textarea id="textarea4"></textarea>
Button
<div id="footer" data-role="footer" data-position="fixed" data-hide-during-focus="false" data-fullscreen="true" data-tap-toggle="false" class="ui-footer">
<h3>Footer</h3>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
I am new to jquery, I stuck with one problem
Possible Duplicate
jQuery Mobile buttons on same row as controlgroup
But the provided solution does not worked for me.
I am trying to make a radio control group using jqm with a button on right side. I am creating the radio buttons . like this:-
<fieldset data-role="controlgroup" id="privacylistdata"
data-theme="c" class="ui-grid-a">
<label for="Setting1">Setting1</label> <input class="privacytype"
type="radio" name="privacy" id="Setting1"
value="Setting1">
<label for="Setting2">Setting2</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label> <input
class="privacytype" type="radio" name="privacy"
id="Setting3"
value="Setting3">
</fieldset>
I like to add a button on right most side of each radio control group in same row like this.
Please help me out.
Thanks.
One way to do this is to have to controlgroups side by side using a table:
<table class="privacylistdatatable">
<tr>
<td>
<fieldset data-role="controlgroup" id="privacylistdata" data-theme="c">
<label for="Setting1">Setting1</label>
<input class="privacytype" type="radio" name="privacy" id="Setting1" value="Setting1">
<label for="Setting2">Setting2</label>
<input class="privacytype" type="radio" name="privacy" id="Setting2" value="Setting2">
<label for="Setting3">Setting3</label>
<input class="privacytype" type="radio" name="privacy" id="Setting3" value="Setting3">
</fieldset>
</td>
<td class="rightColumn">
<fieldset data-role="controlgroup" id="privacylistdataBtns" data-theme="c">
Icon only
Icon only
Icon only
</fieldset>
</td>
</tr>
</table>
Then use some CSS to make things line up nicely:
.privacylistdatatable {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.privacylistdatatable td {
padding: 0px;
}
.privacylistdatatable .rightColumn {
width: 24px;
}
.privacylistdatatable fieldset {
margin: 0;
}
#privacylistdata .ui-radio label {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#privacylistdataBtns .ui-btn {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: 0 !important;
}
#privacylistdataBtns .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9px;
}
#privacylistdataBtns .ui-last-child .ui-btn-inner {
padding-top: 9px;
padding-bottom: 9.5px;
}
DEMO
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 using jQuery Validation plugin, for my jQuery mobile site. The validation is hitting, but it is not displaying the error messages. Need help in figuring out what is wrong. Here is my code.
<script language="javascript" type="text/javascript" >
$(document).ready(function () {
$("#LoginForm").validate();
});
</script>
<form id="LoginForm" class="validate" action="~/Home/Search" method="get">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><div class="center-wrapper">Secure Login</div></li>
<li data-role="fieldcontain">
<label for="FirmKey">FirmKey</label>
<input type="text" id="FirmKey" name="FirmKey" class="required" />
</li>
<li data-role="fieldcontain">
<label for="UserName">User Name</label>
<input type="text" id="UserName" name="UserName" class="required" />
</li>
<li data-role="fieldcontain">
<label for="Password">Password</label>
<input type="password" id="Password" name="Password" class="required" />
</li>
<li data-role="fieldcontain">
<input type="submit" id="submit" value="LOGIN" />
</li>
</ul>
</form>
CSS:
label.error {
float: none;
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
display: block;
margin-left: 22%;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
If you happen to be including the jquery.validation.unobtrusive script, it will .validate() your form before you get a chance to. You need to remove the automatically added validation object from you form before you can call .validate() manually for it to function properly... something along the lines of
$("#theForm").removeData("validator")
$("#theForm").removeData("unobtrusiveValidation");