I am using jQuery Mobile. I am attempting to allow the user to change a slider value in two ways. A number, or a percentage. For example, let's say that the total of a metric is $224. So 50% is $112. Well, I want the user to be able to specify $100 manually, OR specify 50% manually.
With this said, I placed a numeric text box and a slider next to each other. The numeric text box appears larger and different from the slider's text box. One thing to note - I have removed the up/down buttons via CSS.
Try as I might, I cannot get these to display the same way. Does anyone know what classes are needed for this? Changes done on pageinit()?
To put elements side by side, use ui-grid layout. For two items, add class ui-grid-a to a div. Then wrap first with div with class ui-block-a and the other one class ui-block-b.
Demo
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
Optional - Override width of child divs.
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
For input, you need to adjust input's parent div's height by either jQuery or CSS.
Note: Slider has type=number attribute as well, therefore, you need to override the input box only which has class ui-input-text.
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');
Related
I'm trying to have a select menu and a button inline, same width as surrounding lines, see this:
http://jsbin.com/hibatehepe/edit?html,output
Here it's done with field-container, but the select menu should be wider.
Any ideas please?
You can look at this question:
How to make a div to fill a remaining horizontal space?
mystrdat's answer based on this codepen: http://codepen.io/anon/pen/mdoej can work for you.
You basically use float: right to keep the button with a fixed width all the way on the right side, and then select's container automatically fills the available width. (NOTE: I am only using inline CSS to quickly illustrate the answer, you should use CSS classes):
<div class="ui-field-contain">
<label for="b" class="select">Vælg kategori:</label>
<div >
<div style="float: right; padding-left: 0.5em;" >
Tilføj
</div>
<div style="overflow: auto;">
<select size="1" name="b" id="b" data-native-menu="false">
<option value="choose-one" data-placeholder="true">MAKE ME WIDE</option>
</select>
</div>
</div>
</div>
Updated jsbin
I'm trying to change height and font size of horizontal controlgroup radio buttons dynamically with jquery mobile 1.2.1
I can change size and font, but with some values the buttons are displayed toghether with the basic radio selector as in
http://picpaste.com/Capture-94sE5bZi.PNG
http://jsfiddle.net/mauix/VVpR9/15/
<body>
<div data-role="page" id="home">
<div data-role="content">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="btnc1">
<input name="rc" id="rca" value="on" checked="checked" type="radio">
<label for="rca">#1</label>
<input name="rc" id="rcb" value="off" type="radio">
<label for="rcb">#2</label>
<input name="rc" id="rcc" value="other" type="radio">
<label for="rcc">#3</label>
</fieldset>
</form>
</div>
</div>
</body>
<script>
$('#rca').on('click', function(){
$('.ui-radio').css('height','100px');
$('.ui-radio').children().children().css('font-size','18px');
});
$('#rcb').on('click', function(){
$('.ui-radio').css('height','60px');
$('.ui-radio').children().children().css('font-size','14px');
});
$('#rcc').on('click', function(){
$('.ui-radio').css('height','30px');
$('.ui-radio').children().children().css('font-size','10px');
});
</script>
thanks for help
jQM enhances the radio button by replacing its markup, however, it leaves the original input tag in the dom under the new markup vertically centered within the radio div. When you set the height to 100px, the enhanced button stays at the top while the input moves to the middle and becomes visible. Here are 2 options:
Don't resize the button, just change the font size and let the buttons auto-size with the font changes:
DEMO
If you need the button size changed to exact height, you can use CSS to hide the input:
.ui-radio input{
display: none;
}
DEMO
I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/
I have a jquerymobile fieldset that looks like this:
<fieldset data-role="controlgroup" data-type="horizontal" id="myid">
I want to set a custom width for the fieldset but don't know how to do it.
How can I do this? (preferably without an external plugin)
Thanks
Solution
Here's an example of how to di it with fieldset containing select boxes: http://jsfiddle.net/Gajotres/xFPFH/
CSS used is:
.ui-controlgroup-controls {
width:100% !important;
}
.ui-select {
width:33% !important;
}
EDIT :
Here's an example for radio buttons: http://jsfiddle.net/yUZy8/. When you multiply number of radio button widths it must be equal or greater of .ui-controlgroup-controls width.
More info
If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.
I'm trying to throw a list of radio buttons in a dialog for a user to select. How do I make the lists that wrap align? It would be nice to have them uniform or at least stretch out to the edge.
Any help would be greatly appreciated!
Right now I just use $("#mydiv").buttonset()
<div id="mydiv">
<div class="ui-widget-header" style="padding-top: 5px">
<input type="radio" name="slot" id="slot-1" value="1" /><label for="slot-1">7:10 AM - 7:50 AM</label>
...
</div>
</div>
Knowing the width of your dialog, you could easily apply a width to the buttons elements for them to fill the space:
.ui-buttonset .ui-button { width: <your size> }