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:
Related
I'm struggling to set my checkboxes in the below form into 3 evenly spaced columns and centered perfectly within the form. It currently looks as below...
enter image description here
But, I want it to look like...
enter image description here
HTML:
`
<form action="/signup" method="POST">
<div class="form-group">
<input
type="text"
name="firstName"
id="first-name"
class="form-control"
placeholder="First Name"
/>
</div>
<div class="form-group">
<input
type="text"
name="surname"
id="surname"
class="form-control"
placeholder="Surname"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Email"
/>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<fieldset class="form-group">
<legend>Pick your favourite 3 things</legend>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 1
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 2
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 3
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 4
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 5
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 6
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 7
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 8
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 9
</label>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Do it!</button>
</form>
...
<legend>Pick your 3 favourite things</legend>
<div class="row">
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 1
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 2
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 3
</label>
</div>
</div>
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 4
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 5
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 6
</label>
</div>
</div>
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 7
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 8
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 9
</label>
</div>
</div>
</div>
See this JSFiddle: https://jsfiddle.net/bf4vtzry/1/
I have an HTML form and I need to save the inserted data on a mongo database. What I have difficulties is to save data inserted by radio button and ckeckboxes.
Here is my HTML code:
<div class="form-group">
<label>Foto:</label>
<input class="form-control" type="text" name="animal[foto]" placeholder="image url">
</div>
<div class="form-group">
<label>Animal:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="dog" > Dog</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="cat"> Cat</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="other"> Other:</label>
<input type="text" class="form-control" name="animal[tipo]" placeholder="Which?">
</div>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Male"> Male</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Female"> Female</label>
</div>
How can I save what is select in radio btn?
First you have to get the value from the radio buttons.
If you are using a javascript library like jQuery, it's very easy:
alert($('input[name=animal[tipo]]:checked').val());
This code will select the checked input with animal[tipo] name, and gets it's value. Simple isn't it?
Then you can save it as you normally do
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 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
When you read this... I probably still haven't solved my issue,
I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.
Output: http://prntscr.com/5am898
My Code:
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<label class="radio-inline" for="gal2015lbl">
<input name="galTab" id="gal2015" value="2015" type="radio">2015
</label>
<label class="radio-inline" for="gal2014lbl">
<input name="galTab" id="gal2014" value="2014" type="radio">2014
</label>
<label class="radio-inline" for="gal2013lbl">
<input name="galTab" id="gal2013" value="2013" type="radio">2013
</label>
<label class="radio-inline" for="gal2012lbl">
<input name="galTab" id="gal2012" value="2012" type="radio">2012
</label>
<label class="radio-inline" for="galOtherlbl">
<input name="galTab" id="galOther" value="Anders" type="radio">And
</label>
</div>
</div>
</div>
Try placing the input outside the label.
<label class="radio-inline" for="galOtherlbl">
And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">
put the label in label tag like
<label class="radio inline control-label">Some label</label>
try
FIDDLE DEMO
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<input name="galTab" id="gal2015" value="2015" type="radio">
<label class="radio-inline" for="gal2015lbl">2015</label>
<input name="galTab" id="gal2014" value="2014" type="radio">
<label class="radio-inline" for="gal2014lbl">2014</label>
<input name="galTab" id="gal2013" value="2013" type="radio">
<label class="radio-inline" for="gal2013lbl">2013</label>
<input name="galTab" id="gal2012" value="2012" type="radio" />
<label class="radio-inline" for="gal2012lbl">2012</label>
<input name="galTab" id="galOther" value="Anders" type="radio"/>
<label class="radio-inline" for="galOtherlbl">And</label>
</div>
</div>
</div>