I was gold-plating the signup page by adding labels above each field when suddenly:
It worked fine but not with radio buttons. I'm relying on Bootstrap 3 and I think this can be solved without extra CSS but just with right nesting of Bootstrap classes. Right?
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label for="input-password">Password:</label>
<input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
</div>
<div class="col-sm-3">
<label for="input-confirm-password">Confirm Password:</label>
<input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="input-address">Address:</label>
<input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
</div>
</div>
<label class="row">Gender:</label>
<div class="form-group">
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-male" value="Male" type="radio" />Male
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-female" value="Female" type="radio" />Female
</label>
</div>
</div>
<div class="form-group">
<label>Account Type:</label>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div>
</form>
I tried 2 different placement of the elements to resolve this issue as you can see but it didn't work.
I even tried putting a div around each set of the radio buttons and then gave a label for it but that didn't work either.
You can do it this way:
<div class="form-group">
<div class="col-sm-6">
<label for="input-type">Account Type *:</label>
<div id="input-type" class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div
</div>
</div>
Do the same for the other radio buttons group.
Explanation: The col-sm-6 of the outer div is now 100% and can be divided 50:50 by col-sm-6 and col-sm-6
Related
I need to make my form look like "Title over the checkbox and text on the right side" and etc. It's like a list of settings
But I can't display it properly
Here is my code
<div class="modal-body">
<form>
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
<div class="form-group">
<label for="extendedG">To extended view</label>
<input class="form-control" type="checkbox" value="Extended" id="extendedG">
</div>
<div class="form-group">
<label for="CompactG">To Compact view</label>
<input class="form-control" type="checkbox" value="Compact" id="CompactG">
</div>
<div class="form-group">
<label for="extendedBracketsG">Left stady view</label>
<input class="form-control" type="checkbox" value="ExtendedBrackets" id="extendedBracketsG">
</div>
<div class="form-group">
<label for="BeforeG">Comas before</label>
<input class="form-control" type="checkbox" value="Before" id="BeforeG">
</div>
<div class="form-group">
<label for="AfterG">Comas after</label>
<input class="form-control" type="checkbox" value="After" id="AfterG">
<div class="form-group">
<label for="setTrimsAfterDotKomaG">Set trims after ;</label>
<input class="form-control" type="checkbox" value="SetTrimsAfterDotKoma" id="setTrimsAfterDotKomaG">
</div>
<div class="form-group">
<label for="setTrimsBeforeDotKomaG">Set trims before ;</label>
<input class="form-control" type="checkbox" value="SetTrimsBeforeDotKoma" id="setTrimsBeforeDotKomaG">
</div>
<div class="form-group">
<label for="removeTrimsG">Remove trims</label>
<input class="form-control" type="checkbox" value="RemoveTrims" id="removeTrimsG">
</div>
<div class="form-group">
<label for="removeEmptyLinesG">Remove empty lines</label>
<input class="form-control" type="checkbox" value="RemoveEmptyLines" id="removeEmptyLinesG">
</div>
<div class="form-group">
<label for="allVarsUpperCaseG">All variables upper case</label>
<input class="form-control" type="checkbox" value="VarsUpper" id="allVarsUpperCaseG">
</div>
<div class="form-group">
<label for="allVarsLowerCaseG">All variables lower case</label>
<input class="form-control" type="checkbox" value="VarsLower" id="allVarsLowerCaseG">
</div>
<div class="form-group">
<label for="varsUnderscoredG">All variables underscored</label>
<input class="form-control" type="checkbox" value="VarsUnderscored" id="varsUnderscoredG">
</div>
<div class="form-group">
<label for="toExtendedViewG">All variables to extended view</label>
<input class="form-control" type="checkbox" value="ExtendedView" id="toExtendedViewG">
</div>
<div class="form-group">
<label for="removeUnusedVarsG">Remove unused vars</label>
<input class="form-control" type="checkbox" value="removeUnusedVars" id="removeUnusedVarsG">
</div>
</div>
</form>
And I get this https://ibb.co/cqTqaT
I have no idea what the hell is going on with this. Help please!
Thanks!
At first you should check your HTML Structure and used classes.
An example, your following code:
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
creates a div with two divs inside, which take both 50% width. In the first div with there is the label and also the checkbox. In the second div, there is the text you would like to have beside the checkbox. But this isn't working with your markup.
Better would be the following markup:
<div class="col-md-12">
<div class="form-group">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
As you can see, I removed the two div's and used only one form-group. With the following simple CSS:
label{
display: block;
}
p {
display: inline-block;
}
You should get the wanted result.
currently i have 3 radio buttons that i am trying to place next to my 2 input fields using bootstrap. i want to place them in the same row as my input fields, however it keeps getting aligned with the labels of those input fields.
Anyone have an idea on how i can bump down the alignment?
my html:
<div class="container">
<div class="row">
<div class="form-group col-xs-5">
<label for="costDescription">Description</label>
<input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
</div>
<div class="form-group col-xs-2">
<label for="cost">Amount</label>
<input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
</div>
<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>
</div>
here is my plunkr:
https://embed.plnkr.co/YIFin0fUchhSyZHiWUO6/
Why not change the code where the radio buttons are as follows:
<div class="form-group col-xs-5" style="margin-top:40px">
<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>
</div>
Add it to a column and then add a margin-top css style to it
No extra classes. Just some HTML change. Use another column for the radio buttons:
<div class="container">
<div class="row">
<div class="col-sm-5">
<label for="costDescription">Description</label>
<input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
Hello
</div>
<div class="col-sm-2">
<label for="cost">Amount</label>
<input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
</div>
<div class="col-sm-5">
<label class="radio-inline"><input type="radio" name="optradio"> Option 1 </label><br />
<label class="radio-inline"><input type="radio" name="optradio"> Option 2 </label><br />
<label class="radio-inline"><input type="radio" name="optradio"> Option 3 </label>
</div>
</div>
</div>
Preview
Removing the <br /> will give you this:
I have a form-group with inline radio buttons. The issue is that on larger screens the next text input label is appearing right below it on the right side instead of on a new line on the left side.
I have tried adding line breaks but it didn't help
Code:
<div class="container">
<form role="form">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br/>
<button type="submit">Submit</button>
</form>
</div>
JSFiddle Demo
You can wrap every form line into row
<div class="container">
<form role="form">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
https://jsfiddle.net/n70kLfnc/
Change divs with class="form-group" into "row form-group"
You can try to use this CSS
.form-group .label { display: block }
But the best way is to envelope col-* always in a row div.
Here's your code rewritten:
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<div>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
here's my draft to your jsfiddle: https://jsfiddle.net/ag9aqjrz/4/
Try this
Replace <br> with <div class="clearfix"></div>
Without using <br> and clearfix you can try this format
<div class="container">
<div class="row">
<form role="form">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input class="form-control" id="phone" placeholder="Enter Phone Number" type="text">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br>
<div class="radio-inline">
<label for="optionsRadios1">
<input name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">Email</label>
</div>
<div class="radio-inline">
<label for="optionsRadios2">
<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio">Phone</label>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input class="form-control" id="website" placeholder="Testing" type="url">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<div class="col-xs-12">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
Reverse the order from
<div class="form-group">
<div class="col-sm-12">
to
<div class="col-sm-12">
<div class="form-group">
instead of use for phone number as well as Preferred Contact Method
Phone Number:
<div class="col-sm-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
Well, the problem is with column structure, as you are mixing "col-sm-x" with "col-xs-x", you should use one of them or both, so the correct version with xs is as follows
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-xs-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br />
<button type="submit">Submit</button>
</form>
</div>
I know this should be simple, but the solution eludes me. My test-site illustrates my frustration.
<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-10 div-inline">
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required > Writer
</label>
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required> Enabler
</label>
</div>
</div>
Please try this. You have padding in the divs which is throwing your bootstrap layout off (col-sm-10 and col-sm-2 don't have enough space). I have changed col-sm-10 to col-sm-8 to accommodate.
<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-8 div-inline">
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required=""> Writer
</label>
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required=""> Enabler
</label>
</div>
</div>
I'm guessing you're talking about the height difference between the text and the radio-button.
Remove the second radio-inline from the <input> elements, the radio-inline from the <label> is sufficient.
<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-10 div-inline">
<label class="radio-inline">
<input type="radio" class="" name="user-type" id="writer" value="1" required > Writer
</label>
<label class="radio-inline">
<input type="radio" class="" name="user-type" id="enabler" value="2" required> Enabler
</label>
</div>
</div>
I'm trying to build a horizontal form with Bootstrap which has a row of elements on the right hand side of the form like this:
I am having difficulty getting the checkbox, label and input element to sit on a row nicely like that. This is my current attempt. I've added 'checkbox-inline' which gets things on a line, but I can't get the label to move to the middle of the line. Also, the checkboxes are much larger for some reason. Can anyone offer any hints?
The code from the Codepen link:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-5">
<label class="checkbox-inline col-sm-3">
<input class="form-control" type="checkbox" name="input_staff[]" value="39">BH
</label>
<div class="input-group col-sm-3">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
<label class="checkbox-inline col-sm-3" for="">
<input class="form-control" type="checkbox" name="input_staff[]" value="11">CC
</label>
<div class="input-group col-sm-3">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</form>
here is a small example for your checkboxes
one of your mistakes: Don't use col with other elements, like labels. Preferably you use a div for cols, just use it for cols.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
</form>
</div>
I finally got it working by using the 'form-inline' class for each row. This answer made me go back and look at form-inline again.
Here is my sample code:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-10">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="39">BH
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="11">CC
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</div>
</div>
</form>
Here is a codepen with the code above showing what it looks like.