After clicking on a radio button if i click on other radio button the checked value is not getting deselected , where am i going wrong ?
I have added a fiddle here http://jsfiddle.net/Lv8xzkhs/
<fieldset>
<legend>Property Info</legend>
<div class="row">
<div class="col-md-3 col-xs-12">
<label>I want To:</label>
<div class="radio">
<label><input class="radio-inline" type="radio" >Sale</label>
<label><input class="radio-inline" type="radio" >Rent Out</label>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label for="sel1">Looking For:</label>
<select class="form-control" id="sel1">
<option>PentHouse</option>
<option>Villa</option>
<option>Plot</option>
<option>Studio</option>
</select>
</div>
<div class="col-md-3 col-xs-12">
<label>Location:</label>
<input type="text" class="form-control">
</div>
</div>
</fieldset>
Add name attribute to your radio btn
<label><input class="radio-inline" type="radio" name="yourgroup">Sale</label>
<label><input class="radio-inline" type="radio" name="yourgroup">Rent Out</label>
Fiddle: http://jsfiddle.net/Lv8xzkhs/1/
More info : http://www.w3.org/TR/html-markup/input.radio.html
Related
I have Bootrap 4 text input like this
<div class="col-2 form-group">
<label for="follow">Följande</label>
<input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
<div class="invalid-feedback">
Vänligen fyll i Följande.
</div>
</div>
And I want the checkbox label same vertical level as the text input and the check same vertical level and size as the text input. I have tried to swap the input and label code but nothing is working.
Checkbox code with custom checkbox.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check</label>
</div>
I have it like this
But want it like this
You should wrap your boxes properly within a container
<div class="container">
<div class="row">
<div class="col-sm-4 form-group">
<label for="follow">Följande</label>
<input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
<div class="invalid-feedback">
Vänligen fyll i Följande.
</div>
</div>
<div class="col-sm-4 form-group">
<label for="follow">Check</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"></label>
</div>
</div>
</div>
</div>
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 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
<div class="form-group">
<label for="property_feature" class="col-md-4 col-sm-4 control-label">ফিচার</label>
<div class="col-md-8 col-sm-8 col-md-offset-4">
<label class="checkbox-inline">
<input type="checkbox" value="1" id="property_furnished" name="feature">আসবাবপত্রে সজ্জিত
</label>
<label class="checkbox-inline">
<input type="checkbox" value="2" id="property_sublet" name="feature">সাবলেট
</label>
<label class="checkbox-inline">
<input type="checkbox" value="3" id="property_mess" name="feature">মেস
</label>
</div>
</div>
The above code gives me following output. But I want everything to be displayed as inline. How can I do this?
A more bootstrap focused approach would to be to restructure your code like such:
<form class="form-inline">
<div class="col-md-8 col-sm-8 col-md-offset-4">
<div class="form-group">
<label for="property_feature">ফিচার</label>
</div>
<div class="form-group">
<label for="property_furnished">আসবাবপত্রে সজ্জিত</label>
<input value="1" id="property_furnished" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_sublet">সাবলেট</label>
<input value="2" id="property_sublet" name="feature" type="checkbox">
</div>
<div class="form-group">
<label for="property_mess">মেস </label>
<input value="3" id="property_mess" name="feature" type="checkbox">
</div>
</div>
</form>
One of the main issues in your code is that your first label is OUTSIDE of your div class that sets the column position. So you aren't including it in the col-md-offset-4 that you specify.
Here's a bootply http://www.bootply.com/ekh1Cpmeht
You will most likely want to adjust the spacing between the property_feature label and the property_furnished .
Use display: inline-block; because Div will break down to new line the checkbox.
.col-md-8.col-sm-8.col-md-offset-4 {
display: inline-block;
}
.col-md-4.col-sm-4.control-label {
display: inline-block;
}
Check Fiddle.
I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron.
Here is how my form looks (not good looking as of now):
I tried to make it better. but it is getting worse. I want all the fields to be in one-line and
the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.
Here is my html code:
<form action="" id="id-exampleForm" class="form-inline" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
<div id="div_id_price_order" class="form-group">
<label for="id_price_order_0" class="control-label col-lg-2 requiredField">
price order
<span class="asteriskField">*</span>
</label>
<div class="controls col-lg-12">
<label class="radio">
<input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
<label class="radio">
<input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
</div>
</div>
<div class="form-group">
<div id="div_id_newest_entry" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_newest_entry" class=" requiredField">
<input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
latest date
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="div_id_latest_year" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_latest_year" class=" requiredField">
<input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
latest year
</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>
EDIT:
I want something like this: I have edited this on powerpoint. so it does not look very good.
EDIT AFTER COMMENT
Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.
Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.
JsFiddle
<div class="jumbotron">
<form class="form-inline">
<fieldset class="radiogroup">
<legend>Sorting Criteria</legend>
<label for="id_price_order_0">
price order
<span class="asteriskField">*</span>
</label>
<label class="radio" for="id_price_order_1">
lowest
<input type="radio" checked="checked" id="id_price_order_1" />
</label>
<label class="radio" for="id_price_order_2">
highest
<input type="radio" id="id_price_order_2" />
</label>
<label for="id_newest_entry" class="requiredField checkbox">
latest date
<input id="id_newest_entry" type="checkbox" />
</label>
<label for="id_latest_year" class="requiredField checkbox">
latest year
<input id="id_latest_year" type="checkbox" />
</label>
<input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs" />
</fieldset>
</form>
Add the class form-control to ALL of your input elements for a start:
<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >
Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:
<div class='row'>
<form ... >
<div class='col-lg-2>
<label ... ></label>
<input ... >
</div>
<div class='col-lg-2'>
...
</div>
...
</form>
</div>
Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.
Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:
<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
<form action='anotherScript.php' method='post' class='form-inline'>
<div class='row'>
<div class='col-md-4'>
<strong>Price:</strong>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="low" checked>
Lowest
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="high">
Highest
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='date' value='date'>
Latest Date
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='year' value='year'>
Latest Year
</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/52VtD/5046/
Make sure you stretch the results panel to full width to see the form in-line.