PAGE IS HERE
I created radio button using following code and the button & the text comes next to each other. That's fine but it is not VERTICALLY middle aligned to the text input field which is placed left to the radio button.
<div class="col-md-3">
<div id="edit-donation-frequent" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent">
<input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
</div>
</div>
PAGE IS HERE
I put .form-item label.option { vertical-align: middle; } but still the same result.
Then I tried margin-top and some other css styles but could not get what I want.
I want the both radio buttons(monthly, onetime AND Landline) look like following screenshot.
and
how can I adjust the page like screen shots.
[UPDATE]
Code for the section (row) as per Rachel's request (Anyhow by visiting this page you can have a look at the source code):
<div class="row">
<div class="col-md-3">
<div class="form-item form-type-textfield form-item-donation-amount form-group">
<input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount"/>
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-select form-item-donation-currency form-group">
<select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
<option value="DKK">DKK</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div class="col-md-3">
<div id="edit-donation-frequent" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent">
<input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />
<label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
</div>
</div>
</div>
Ok, firstly you need to put the surrounding div around the Land line element like you do with the monthly/one time fields and also make the wrappers for the monthly/one time so they are the same
<div class="row">
<div class="col-md-3">
<div class="form-item form-type-textfield form-item-donation-amount form-group">
<input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount">
</div>
</div>
<div class="col-md-3">
<div class="form-item form-type-select form-item-donation-currency form-group">
<select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
<option value="DKK">DKK</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div class="col-md-3">
<div id="edit-donation-frequent" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent">
<input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio">
<label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
</div>
</div>
</div>
<div class="col-md-3">
<div id="" class="form-radios form-group">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio">
<label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
</div>
</div>
</div>
and
<div class="col-md-4">
<div class="form-item form-type-radio form-item-donation-frequent form-group">
<input type="radio" id="edit-donation-land-line" name="landline" value="landline" class="form-radio">
<label class="option font-size-sixteen" for="edit-donation-land-line">Land Line</label>
</div>
</div>
Then create a new css rule
.form-item.form-type-radio {
padding-top: 0.5em;
margin-top: 0;
}
and this should fix your issues.
Hope that helps
Related
I'm having some trouble with a Twitter Bootstrap form alignment. I have a checkbox that causes the below div's to incorrectly line up with the grid because it's height is only 70px tall when the div next to it is 74px. I could add the CSS to force it to the pixel height needed (see id "test") but I don't want this stay a fixed height when content responds for smaller screens. What would be the best way to fix this?
<div class="container-fluid appointment">
<div class="container">
<div class="row">
<h2 class="text-center">Appointment Request</h2>
<form>
<div class="col-sm-4">
<div class="form-group">
<label for="">Phone Number:</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
<label for="petname">Pet's Name:</label>
<input type="text" class="form-control" id="petname">
</div>
</div>
<div class="col-sm-5" id="test">
<div class="form-group">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="pettype">Pet Type:</label>
<select class="form-control" id="pettype">
<option>Select Pet Type...</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="breed">Breed Type:</label>
<select class="form-control" id="breed">
<option>Select Breed...</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="age">Pet Age:</label>
<select class="form-control" id="age">
<option>Select Pet Age...</option>
<option value="less than 1">Less than 1 year</option>
<option value="1">1 Year</option>
</select>
</div>
</div>
<div class="col-sm-12 text-center">
<div class="form-group">
<button type="submit" class="btn btn-lg">Send Appointment</button>
</div>
</div>
</form>
</div>
</div>
</div>
just add a class "clearfix" for the div containing the checkbox as
<div class="col-sm-5" id="test">
<div class="form-group clearfix">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
I am trying to create a form that looks like this:
What I have come up with looks like this. I either can have the dropdown take up the correct amount of space, but then the text is underneath, or have the text next to the dropdown and everything gets smushed.
I'm not sure what I'm doing wrong. Here is the html:
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<div class="form-group">
<select class="liveSyncSchedule form-control"></select>
</div>
<div class="form-group">{{t "templates.scheduler.seconds"}}</div>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
All help is greatly appreciated!
The layout is messed because form-group class is not handled properly. Try this,
<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}">
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label>
<div class="col-sm-8">
<div class="form-inline">
<select class="liveSyncSchedule form-control"></select>
<span>{{t "templates.scheduler.seconds"}}</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.enabled"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" />{{t "templates.scheduler.persisted"}}
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label>
<div class="col-sm-8">
<select class="misfirePolicy form-control">
<option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option>
<option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option>
</select>
</div>
</div>
</form>
Thanks!
Here is a simplified fiddle: https://jsfiddle.net/mz1xgr38/
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Fire every</label>
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-md-6">
Seconds
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9 ">
<div class="checkbox">
<label>
<input type="checkbox" />Enabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Persisted
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Misfire policy</label>
<div class="col-sm-9">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</form>
I'm experiencing an odd behaviour in Bootstrap where a col-sm-6 is expanding on top of the sibling column above it, which renders the sibling column unclickable.
Please see source code and live demo here: Codepen
Resize the output window to xs size (below 768px) to experience the issue).
The checkbox for 'As above' is unclickable because the phyiscal address 'Address line 1' is expanding above it, creating a sort of barrier.
The issue can be solved by adding 'col-xs-12' in addition to the 'col-sm-6', but Bootstrap should figure this one out by itself without this (as it normally does). Any ideas what is causing this?
EDIT:
One could argue that I should put all my fields in different rows, but for various reasons I'd like to keep everything within one row and let Bootstrap figure out the flow of the items, which normally works fine.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Postal address</h3>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPostalAddressLine1" required="" data-parsley-required-message="Please enter your postal address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPostalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalState">State*</label>
<select class="form-control" id="inputPostalState" required="" data-parsley-required-message="Please select the state from the dropdown.">
<option value="">Please Select</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPostalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPostalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
<div class="col-xs-12">
<h3>Physical address</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="checkbox checkbox-default">
<label>
<input type="checkbox" value="" id="use-postal-address" data-parsley-multiple="use-postal-address">
<span class="icon"></span>
<span class="text">As above (use postal address)</span>
</label>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label for="inputPhysicalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine1" required="" data-parsley-required-message="Please enter your physical address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalState">State*</label>
<input type="text" class="form-control" id="inputPhysicalState" value="NSW" disabled="disabled">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPhysicalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPhysicalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
</div>
</div>
I think you're not clearing your floats properly across media queries.
Add .col-sm-6{overflow:hidden} to see if it solves it, then try to clear your floats whenever possible.
Also, read up on this, it might be helpful
I would like to group the radio button and bootstrap select but they're not inline.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"><span class="input-group-addon"> Preset Size (<b>inch</b>):
</span></label>
<div class="col-md-6">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div> <!-- Radio + Dropdown -->
</form>
</div> <!-- container -->
and I also want to group 2 text boxes together with the label to create user input.
<div class="container">
<form class="form-inline">
<div class="input-group">
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-sm-4">
<label> x </label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</form>
</div>
Here's the output screenshot.
You may need to re-arrange your code a bit to fit bootstrap's use.
Firstly, use .form-group - also put element in rows when possible.
Something along the lines of:
ps you may have to adjust this a bit but it should give you a good place to start from
.form-inline input.form-control {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-6">
<input name="radioGroup" id="radio1" value="option1" type="radio" />Preset Size (<b>inch</b>):
</label>
<div class="col-xs-5">
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36”x84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
<div class="form-group col-xs-6">
<label class="radio-inline col-xs-5">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio">Custom Size:
</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
<div class="col-xs-1">
<label>x</label>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</form>
</div>
You forgot the row div. whenever you are using bootstrap layout with columns- you need to nest the columns div inside a row div:
<div class="row">
<div class="col-sm-4"> first third</div>
<div class="col-sm-4"> second third</div>
<div class="col-sm-4"> third third</div>
</div>
Read the bootstrap doc for more information
Here are two ways you can do this depending on if you want all the elements in one row or not. It's just utilizing input-groups and not much else.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Preset Size (<b>inch</b>):
</span>
<select id="size" class="selectpicker form-control" data-live-search="true" title="Please select preset size ...">
<option>36” x 84”</option>
<option>48”x84”</option>
<option>60”x84”</option>
<option>72x84”</option>
<option>48”x96”</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input name="radioGroup" id="radio2" value="option2" checked="" type="radio"> Custom Size:
</span>
<input type="text" class="form-control" id="customSize1" placeholder="">
</div>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="sizing-addon2">X</span>
<input type="text" class="form-control" id="customSize2" placeholder="">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
I have the following markup using bootstrap grids:
<form id="store-form" class="user-form">
<div class="row">
<div class="col-sm-6">
<fieldset id="store-form-store-fields">
<label>Store Nickname</label>
<input id="store-nickname-field" type="text" name="nickname" required class="form-control">
</fieldset>
</div>
<fieldset id="store-form-location-fields">
<div class="col-sm-6">
<label>Store Address</label>
<input id="store-street-field" type="text" name="street" required class="form-control">
</div>
<div class="col-sm-6">
<label>City</label>
<input id="store-city-field" type="text" name="city" required class="form-control">
</div>
<div class="col-sm-3">
<label>State</label>
<select id="store-state-field" name="state_id" required class="form-control">
<option>- Select a State -</option>
<option value="MA">Massachusetts</option>
<option value="CA">California</option>
</select>
</div>
<div class="col-sm-3">
<label>Zip Code</label>
<input id="store-zipcode-field" type="text" name="zipcode" required class="form-control">
</div>
</fieldset>
</div>
<div class="submit-wrapper">
<button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button>
</div>
</form>
As you can see, I'm trying to use fieldsets to group the fields into two groups. I need to do this so that I can create Backbone.js view for each group of fields separately. Obviously this breaks the grid, since I have an immediate child of .row that isn't a column div.
Is there any way at all to make fieldsets work with a form that is layed out using Bootstrap grids?
Edit for clarification: My goal is for the layout to behave the same as if the fieldsets were removed from the example.
What about wrapping the second <fieldset> in a div.col-md-6 and putting all the contents of the second <fieldset> in div.row? That way you are not skipping the css column definition. Let me know if that helps.
UPDATE:
I modified the code to use responsive resets and col-md-pull/col-sm-pull. Seems to remain responsive. This may be closest solution possible as you would not be able to properly close the col definition <div> within that fieldset to get proper clearing.
http://jsfiddle.net/s9baun7c/4/
<form id="store-form" class="user-form">
<div class="row">
<div class="col-sm-6">
<fieldset id="store-form-store-fields">
<label>Store Nickname</label>
<input id="store-nickname-field" type="text" name="nickname" required class="form-control" />
</fieldset>
</div>
<fieldset id="store-form-location-fields">
<div class="col-sm-12">
<label>Store Address</label>
<input id="store-street-field" type="text" name="street" required class="form-control" />
</div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="row">
<div class="col-md-12">
<div class="col-sm-12 col-sm-pull-12 col-sm-pull-12">
<label>City</label>
<input id="store-city-field" type="text" name="city" required class="form-control" />
</div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-sm-pull-12 col-sm-pull-12">
<label>State</label>
<select id="store-state-field" name="state_id" required class="form-control">
<option>- Select a State -</option>
<option value="MA">Massachusetts</option>
<option value="CA">California</option>
</select>
</div>
<div class="col-sm-6 col-sm-pull-12 col-sm-pull-12">
<label>Zip Code</label>
<input id="store-zipcode-field" type="text" name="zipcode" required class="form-control" />
</div>
</div>
</div>
</fieldset>
</div>
<br>
<div class="submit-wrapper">
<button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button>
</div>
</form>