When creating inline radios in a form-horizontal, is there any way to vertically align the radio buttons? fiddle here - note that button 'EF' is below button 'B', but is offset to the right - I'd like it to be directly below 'B'. I can mess around with padding but I'd rather use the grid if possible. Thanks.
Demo Fiddle
The issue here is that you are effectively placing two columns of content within a single Bootrap column (col-sm-4), you either want to split the radio buttons into separate columns, or apply a set width to them so it is consistent across rows.
Try adding:
label{
width:46%;
}
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
option two
</label>
</div>
Bootply here
Related
Is it possible somehow to make checkbox and text inline? Having trouble with this one, tried inline options through css, but seems I either can't use it or It is doesn't work.
Here is a simple example. All you need is a wrapper element and one line of CSS. By default, all immediate flex children will share the available horizontal space on the line.
.checkboxRow {
display: flex;
}
<div class="checkboxRow">
<input id="mycheckbox" type="checkbox">
<label for="mycheckbox">I am a label</label>
</div>
<div class="checkboxRow">
<input id="mycheckbox2" type="checkbox">
<label for="mycheckbox2">I am a label</label>
</div>
I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.
I have a set of jQuery Mobile radio buttons with data-type="horizontal and data-mini="true" in the fieldset.
Obviously I'm using this on a mobile site but when the screen size is reduced the radio buttons become stacked on top one another.
How can I prevent this from happening?
Here is an example
http://jsfiddle.net/sg8EJ/3/
<fieldset class="changeFulfilment" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input class="changeFulfillmentInput" type="radio" name="radio-mini" id="radio-mini-1"/>
<label for="radio-mini-1">long Button----------</label>
<input class="changeFulfillmentInput" type="radio" name="radio-mini" id="radio-mini-2" />
<label for="radio-mini-2">short</label>
</fieldset>
Give its container div a min-width with css. This will solve your problem.
Bootstrap has a lot of examples for types of forms. I'm interested in using the "Horizontal form" which looks like this
This is what it looks like after outlining some elements with the web inspector toolbar:
I am working inside of a popup modal and space is already a bit tight. I tried adding bootstrap's grid system's .span1 and .span2 to the labels as a class, but it is not giving the desired behavior.
Is there a way to use some other aspect of bootstrap to get the desired behavior (i.e. tighten up the amount of space that labels on a horizontal form take up)? What is the proper way to do this? I'm using bootstrap version 2.1
i am not aware if bootstrap has got something defined for it..below is a workaround..
<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>
i added style="width:auto" which was default 140px and style="margin-left:auto" which was default 160px. Also class="input-small" to reduce the input field width to squeeze out more space so that it fits in modal..
Now you tweak further to fit it as per your needs..
To reduce the vertical spacing, form-control-sm shrinks the font-size (using Bootstrap 4):
<form>
<div class="form-group form-row">
<label class="col-sm-2 col-form-label form-control-sm">Label</label>
<div class="col-sm-3">
<input class="form-control form-control-sm">
</div>
</div>
</form>
Please check my code at http://jsfiddle.net/TccN5/.
It has a gap between the input text box and the button on the right. For the very same markup on Bootstrap site the input box and the button has a nice tight fit with no gap.
Why do I have the gap?
You have extra whitespace characters between button and input elements. Place button tag immediately after input element:
<input type="text" /><button class="btn" type="button">Any</button>
DEMO1
Or alternatively, apply this css styles:
.input-append{
font-size:0;
}
DEMO2
Im not sure why that is, but this is how i fixed it. maybe you got some of your own css conflicting with the text field.
here's the jsfiddle with the fix http://jsfiddle.net/TccN5/2/
I just added
style="margin-right:-4px"
to your
<input type="text">
Use input-prepend and input-append
<div class="btn-group input-prepend input-append">
<input type="button" class="btn" value="Prev">
<input type="text" value="">
<input type="button" class="btn" value="Next">
<div>