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
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 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. :-)
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> }
I need to add the button on the right hand side of the footer. I am adding it like this
<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed">
<h4>Copyright 2011</h4>
<a class="ui-btn-right" data-theme="a" data-ajax="false" href="/login.php?mode=logout">Logout</a>
</div>
I am getting the button but it is coming at the start of the next line. If I change the role to header, the button positions perfectly. Even if I add class="ui-header" in footer div, it comes ok but then it simply doesn't get its position fixed. ('coz it has now both the style ui-footer and ui-header)
How can I put the button on footer on extreme right without sacrificing the data-position? (I need the data-position fixed also)
the footer has a right margin set to 90px by default. You need to override it and make the two controls float, like so:
<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain"
data-position="fixed">
<h4 style="display: inline-block; margin-left: 65px; margin-right: 0">
Copyright 2011</h4>
<a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a"
data-ajax="false" href="/login.php?mode=logout">
Logout</a>
</div>
P.S. From usability point of view, I would have placed the "Logout" button in the top-right corner of the page rather than in a footer.
I found Tsar's answer helpful, though it doesn't seem like most of that markup is necessary. I get the same effect with
<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer">
<a class="ui-btn-right" href="/login.php?mode=logout">Logout</a>
<h3>Copyright 2011</h3>
</div>
(I have only tested this in my desktop browser so far.) Looks like the magic is in the ui-btn-right class. There is also a ui-btn-left.