Can anyone please shed some light on how to format Radio Buttons in Bootstraps form-group?
It gets into problem if there are too many radios control and wrap around to the next line. The bootstrap control box will not expend to fit everything.
Attached sample below which had been simplified for illustration purposes.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
<label class="control-label" for="mRadio">Radio Test</label>
<div id="mRadio" class="form-control">
<label class="radio-inline">
<input type="radio" name="optradio">Option 1</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 4</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 5</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 6</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 7</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 8</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 9</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 10</label>
</div>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
Add this css to overwrite the height set by bootstrap
.form-control {height: auto;}
Related
Using v3.3.7
No matter how long I mess with this, I cant seem to get this radio button done properly. It always looks weird... in he code below, you will see that i am trying to have the 2 options lid out inline, next to each other.
But they seem to cover their labels, and the actual input is huge...
Relevant code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<label>Gender</label>
<div>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
Male
</label>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
Female
</label>
</div>
</div>
<div class="col-md-6">
<label>Gender</label>
<div>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
Male
</label>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
Female
</label>
</div>
</div>
LINK: https://mizrachi.coda.co.il/radio.asp
Many thanks
You just need to remove the .form-control classes if you want them to be inline like that.
http://getbootstrap.com/css/
All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<label>Gender</label>
<div>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="M" class="required" title="*">
Male
</label>
<label class="radio-inline">
<input type="radio" name="x_Gender" value="F" class="required" title="*">
Female
</label>
</div>
</div>
Just remove form-control class of your radio buttons.
In one of my assignments I have to perform some form validation. Everything is fine,apart from the fact that the Number of Stars label isn't aligned with the radio buttons. I am providing you the code.
https://jsfiddle.net/m8nwnc8a/29/
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{ 'has-error':
commentForm.author.$error.required &&
!commentForm.author.$pristine }">
<label for="author" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author"
name="author" placeholder="Enter Name"
ng-model="userComment.author" required>
<span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="commentForm.author.$error.required &&
!commentForm.author.$pristine" class="help-block">
Your name is required.
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of stars</label>
<div class="radio col-sm-9">
<label class="radio-inline control-label">
<input type='radio' name="rating" value="1" ng-model="userComment.rating">1
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="2" ng-model="userComment.rating">2
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="3" ng-model="userComment.rating">3
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="4" ng-model="userComment.rating">4
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5
</label>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
commentForm.comment.$error.required &&
!commentForm.comment.$pristine }">
<label for="comment" class="col-sm-2 control-label">Comment</label>
<div class="col-sm-10">
<textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required>
</textarea>
<span ng-show="commentForm.comment.$error.required &&
!commentForm.comment.$pristine" class="help-block">
Your comment is required.
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="commentForm.$invalid">Send Comment</button>
</div>
</div>
</form>
Any ideas?
Thanks Theo.
PS. Don't worry about the different directives like ng-show,ng-click or ng-model.
Change:
<label class="col-sm-3 control-label">Number of stars</label>
<div class="radio col-sm-9">
To:
<label class="col-sm-2 control-label">Number of stars</label>
<div class="col-sm-10">
You can align it like this-- just look at the position of the label.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{ 'has-error':
commentForm.author.$error.required &&
!commentForm.author.$pristine }">
<label for="author" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="author"
name="author" placeholder="Enter Name"
ng-model="userComment.author" required>
<span ng-show="feedbackForm.emailid.$invalid && !feedbackForm.emailid.$pristine" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span ng-show="commentForm.author.$error.required &&
!commentForm.author.$pristine" class="help-block">
Your name is required.
</span>
</div>
</div>
<div class="form-group">
<div class="radio col-sm-9">
<label class="col-sm-3 control-label">Number of stars</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="1" ng-model="userComment.rating">1
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="2" ng-model="userComment.rating">2
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="3" ng-model="userComment.rating">3
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="4" ng-model="userComment.rating">4
</label>
<label class="radio-inline control-label">
<input type='radio' name="rating" value="5" ng-model="userComment.rating" checked>5
</label>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error':
commentForm.comment.$error.required &&
!commentForm.comment.$pristine }">
<label for="comment" class="col-sm-2 control-label">Comment</label>
<div class="col-sm-10">
<textarea class="form-control" name="comment" rows="6" ng-model="userComment.comment" required>
</textarea>
<span ng-show="commentForm.comment.$error.required &&
!commentForm.comment.$pristine" class="help-block">
Your comment is required.
</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary"
ng-disabled="commentForm.$invalid">Send Comment</button>
</div>
</div>
</form>
</body>
</html>
In my form I have two cols with the label on top and a full width input. My problem is that I now have two fields requiring radios. I want to split the col into 2 and have the two labels with their two radios below. I can get that ok but the alignment is then not right on the next field down.
You can see it here in this bootply http://www.bootply.com/VlFHq0daui
Leased property and mesne rate units. The key codes below it is not aligning correctly.
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="address_line1" class="control-label">Address 1</label>
<input type="text" class="form-control" id="address_line1">
</div>
<div class="form-group">
<label for="address_line1" class="control-label">Address 2</label>
<input type="text" class="form-control" id="address_line2">
</div>
<div class="form-group">
<label for="town" class="control-label">Town*</label>
<input type="text" class="form-control" id="town">
</div>
<div class="form-group">
<label for="county" class="control-label">County</label>
<input type="text" class="form-control" id="county">
</div>
<div class="form-group">
<label for="eircode" class="control-label">Eircode</label>
<input type="text" class="form-control" id="eircode">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="reference" class="control-label">Reference</label>
<input type="text" class="form-control" id="reference">
</div>
<div class="form-group">
<label for="tax_reference" class="control-label">Tax Reference</label>
<input type="text" class="form-control" id="tax_reference">
</div>
<div class="form-group">
<label for="local_authority" class="control-label">Local Authority</label>
<select name="local_authority" id="local_authority" class="form-control">
<option>Select...</option>
<option value="41">Ahtlone Town Council</option>
<option value="88">Youghal Town Council</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<label for="leased_property" class="control-label">Leased Property?</label>
<br>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
<div class="col-lg-6">
<label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label>
<br>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="key_code" class="control-label">Key Code</label>
<input type="text" class="form-control" id="key_code">
</div>
<div class="form-group">
<label for="gprn_number" class="control-label">GPRN Number</label>
<input type="text" class="form-control" id="gprn_number">
</div>
<div class="form-group">
<label for="mprn_number" class="control-label">MPRN Number</label>
<input type="text" class="form-control" id="mprn_number">
</div>
</div>
</div>
</form>
You can warp radios inputs inside a div with same height of input box:
<div class="radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.radios{
height: 34px;
padding: 5px;
}
Bootply
Add this to your CSS.
.form-group {
min-height:59px;
}
After some trying I found a solution, its not perfect, but will solve the issue.
You could wrap your radio elements into a row and hardcode the needed margins to align the buttons the way you want. For this I gave the row a custom class align-radios.
HTML:
<div class="row align-radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.align-radios {
margin: 7px 0 7px 5px;
}
Hope this helps you a bit.
I'm using bootstrap CSS and i have a form that use radio button , it works in Chrome
and when i use Firefox the labels and the button collapses.
Here is the code
<form class="form-horizontal" method="post" action="registerResult.php">
<fieldset>
<div class="control-group">
<label class="control-label">Gender :</label>
<label class="radio">
<div class="controls"><input type="radio" name="sexe" id="optionsRadios1" value="male" checked></div>
Male
</label>
<label class="radio">
<div class="controls"><input type="radio" name="sexe" id="optionsRadios1" value="female" checked></div>
Female
</label>
</div>
</fieldset>
</form>
Here is the screenshot :
Check this:
<div class="control-group">
<label class="control-label">Gender:</label>
<div class="controls">
<label class="radio">
<input type="radio" name="Gender" value="Male"> Male
</label>
<label class="radio">
<input type="radio" name="Gender" value="Female"> Female
</label>
<label class="radio">
<input type="radio" name="Gender" value="Other"> Other
</label>
</div>
</div>
I have a Bootstrap form with some inline radio buttons and a label. I'd like to keep the label on the same line as the buttons, but I can't seem to make that happen. Here's my approach:
<form>
<div class="control-group">
<label class="control-label">Some label</label>
<div class="controls">
<label class="radio inline">
<input type="radio" value="1"/>
First
</label>
<label class="radio inline">
<input type="radio" value="2"/>
Second
</label>
</div>
</div>
</form>
Fiddle: http://jsfiddle.net/GaDbZ/2/
I also tried this:
<form>
<div class="form-inline">
<label class="control-label">Some label</label>
<label class="radio">
<input type="radio" value="1"/>
First
</label>
<label class="radio">
<input type="radio" value="2"/>
Second
</label>
</div>
</form>
But everything is smooshed together. Fiddle: http://jsfiddle.net/GaDbZ/3/
How can I get the horizontal spacing from the first one combined with the vertical spacing of the second?
Also, I should note that in real life, I have a bunch of other stuff going on in the form, so I don't want to use form-horizontal because it creates funky margins that don't jive with the other stuff I have in there.
If you add the 'radio inline' class to the control label in the solution provided by user1938475 it should line up correctly with the other labels. Or if you're only using 'radio' like your 2nd example just include the 'radio' class.
<label class="radio control-label">Some label</label>
OR for 'radio inline'
<label class="radio-inline control-label">Some label</label>
Since Bootstrap 3 you have to use checkbox-inline and radio-inline classes on the label.
This takes care of vertical alignment.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
This may work for you, Please try this.
<form>
<div class="form-inline">
<div class="controls-row">
<label class="control-label">Some label</label>
<label class="radio inline">
<input type="radio" value="1" />First
</label>
<label class="radio inline">
<input type="radio" value="2" />Second
</label>
</div>
</div>
</form>
This is all nicely lined up including the field label. Lining up the field label was the tricky part.
HTML Code:
<div class="form-group">
<label class="control-label col-md-5">Create a</label>
<div class="col-md-7">
<label class="radio-inline control-label">
<input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
</label>
<label class="radio-inline control-label">
<input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
</label>
</div>
</div>
CSHTML / Razor Code:
<div class="form-group">
#Html.Label("Create a", htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-7">
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
</label>
<label class="radio-inline control-label">
#Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
</label>
</div>
</div>
In Bootstrap 4 you can use the form-check-inline class.
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option1" value="1">
<label class="form-check-label" for="option1">First</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="queryFieldName" id="option2" value="2">
<label class="form-check-label" for="option2">Second</label>
</div>
Key insights for me were:
- ensure that label content comes after the input-radio field
- I tweaked my css to make everything a little closer
.radio-inline+.radio-inline {
margin-left: 5px;
}
Best is to just Apply margin-top: 2px on the input element.
Bootstrap adds a margin-top: 4px to input element causing radio button to move down than the content.