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> }
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
these appear one above the other inside the data-role="page" div and I would like them horizontal "side by side" (preferably the second fieldset on the right, the first fieldset to the left with a shrinking gap spacing them) , does anyone know the "right" way to do this? i.e. so that they are not one above the other but side by side and work with resizing?
<fieldset data-role="controlgroup" data-type="horizontal" >
<button data-inline="true" data-icon="refresh" data-theme="d">save</button>
back
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" >
<input type="checkbox" name="selectallbox" id="selectallbox" class="checkable selectall">
<label for="selectallbox">select all</label>
</fieldset
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 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');
I need to group checkbox together but in 2 columns. In the image below ive created 2 different fieldsets. I know this isnt very semantic but it displays the layout I want to achieve.
Is there a standard jQuery Mobile way to do this?
I want the checkboxes to look like they belong in one section. I could remove the rounded corder of green top left, pink bottom left and blue bottom right. Do I need to use standard CSS overrides for this or is there a more elegant way? Thanks
I think you want to look at Layout Grids: http://jquerymobile.com/test/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block-a">
<label><input type="checkbox" name="checkbox-1" /> Any</label>
<label><input type="checkbox" name="checkbox-1" /> Red </label>
</div>
<div class="ui-block-b">
<label><input type="checkbox" name="checkbox-1" /> Green </label>
<label><input type="checkbox" name="checkbox-1" /> Black </label>
</div>
</div><!-- /grid-a -->
UPDATE
Based on your comment, no you cannot have two separate columns grouped into one fieldset.
The data-role="controlgroup" on a fieldset removes the margins and padding to give the grouped effect, but what you end up with is something like this: http://jsfiddle.net/shanabus/qNYPh/1/
However, if you are ok with one parent fieldset and two nested, grouped, fieldsets... then you can end up with a solution like this: http://jsfiddle.net/shanabus/hcyfK/1/
shanabus gave a good answer with his nested grouped solution:
http://jsfiddle.net/shanabus/hcyfK/1/
You can take that one step further by setting/overriding the appropriate css 'border radius' values to zero for any corner you need to in order to get rid of the touching rounded corners and achieve a more consistent appearance.
As per the example:
<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label>
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label>
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label>
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label>
Yes, I am a bad person because I didn't separate html & css but it's an example. :-)