I want to place two select options side by side in my form. I am using Bootstrap 3 but I can't place them with proper alignment.
Here is my HTML code:
<form role="form">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block te" >Prices & Availability</button>
</form>
Use this
jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
class form-control in bootstrap has the display value of block. give it the class d-inline-block
<select class="form-control d-inline-block">
Related
How do I adjust the bootstrap input group width and still have it be responsive. For example I only want the quantity input field to take x%(be much smaller) than description field. Also how do I wrap each input field on mobile? Thanks in advance, sorry I am a Noob.
<div class="container">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel panel-danger">
<div class="panel-heading text-center"><strong>Store Transfer</strong></div>
<div class="panel-body">
<div class="col-lg-12">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">Description</span>
<input type="text" class="form-control input-sm" placeholder="Item Description">
<span class="input-group-addon">Quantity</span>
<input type="text" class="form-control input-sm" placeholder="Quantity">
<span class="input-group-addon">Cost</span>
<input type="text" class="form-control input-sm" placeholder="Cost">
<span class="input-group-addon">Total $0.00</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
<div class="col-lg-8">
<div class="form-group">
<div class="input-group"><span class="input-group-addon">Transfer From:</span>
<select class="form-control form-control-sm">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon">Transfer To:</span>
<select class="form-control">
<option value="store" disabled="" selected="" class="">Select Store</option>
<option value="Richfield" class="">Richfield</option>
<option value="Eagan" class="">Eagan</option>
</select>
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Submit</button>
</span>
</div>
</div>
</div>
<div class="col-lg-2"></div>
</div>
</div>
</div>
BootPly Here
I have this code in bootstrap:
<div class="input-group" id="adv-search">
<select class="form-control" >
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
</select>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
I checked my code in http://www.bootlint.com/.
But I have this error:
.input-groupcontains a <select>; this should be avoided as <select>
s cannot be fully styled in WebKit browsers
So I can not use input-group with select!
Is there a standard way to do it in bootstrap?
Bootlint leads you to the error E006 that says
non- .form-control within .input-group
You should use form-group instead of input-group like this:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
I was looking up this style on bootswatch: https://bootswatch.com/simplex/
And especially looked for styling forms, like here:
But when I add the code that you get when clicking on the little red icon in the top right of the form example on bootswatch to my website, it looks like this:
So the text labels and input fields have a line break inbetween them, the a little darker shaded background box isnt shown and other things are misaligned, too. How does that come?
This is the entire code of my Page:
#model WebProto.ViewModels.NewChartConfigViewModel
#using MaschinenModell;
#{
ViewBag.Title = "Neues Diagramm";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
Okay im so flipping stupid. Its because I displayed the webpage I created in internet explorer. My fault! :D
Firefox, Opera and Chrome show it correctly.
I'm doing an application with Rails and AngularJS which have a form with a select list, the problem it's that it looks pretty ugly, because the width is too large for the options it have.
Here's my form with some sample values
How can I shorten the width of the select list without distorting the rest of the form?
Here's the code of my form
<h1>Create Form</h1>
<form ng-submit="addPoll()" style="margin-top:30px;">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="title"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea type="text" class="form-control" ng-model="description"></textarea>
</div>
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}" >{{group.name}}</option>
</select>
</div>
<div class="form-group">
<label>Welcome Message</label>
<textarea type="text" class="form-control" ng-model="initial_message"></textarea>
</div>
<div class="form-group">
<label>Outgoing Message</label>
<textarea type="text" class="form-control" ng-model="final_message"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="allow_anonymous_answer"> Allow Anonymous Answer
</label>
</div>
<button type="submit" class="btn btn-primary" style="float: right;">Continue</button>
</form>
You can do it a few different ways. You can either add an inline style to the div.form-group or use Bootstrap's grid system. Here's two examples:
<div class="form-group" , style="width: 200px">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
</div>
</div>
JSFiddle
Could you lease tell me how to prevent the brands select box from being hidden behind the date. I gave minimum width to dates because I do not want them to collapse more than the minimum width.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
<form accept-charset="UTF-8" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="form-group credits-daterange">
<label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
<div class="col-sm-10 col-xs-12">
<div class="input-group input-daterange" data-date-format="yyyy-mm-dd" style="min-width: 236px;">
<input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="brand" name="brand">
<option value="0">All Brands</option>
<option value="9618">Brand 1</option>
<option value="10268">Brand 2</option>
<option value="10232">Brand 3</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Created">status 1</option>
<option value="Downloaded">Status 2</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-12 pull-right">
<input class="hidden" id="search_txt" name="search_txt" type="text" value="">
<input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
</div>
</div>
</form>
</div>
</body>
</html>
Demo
All suggestions are welcome.
Thanks
The overlap is due to style="min-width: 236px;
If you remove it, you can this that the issue is gone away.
Here is a fiddle : http://www.bootply.com/KFgIJ6z5ld
Your code without your custom style :
<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
<form accept-charset="UTF-8" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="form-group credits-daterange">
<label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
<div class="col-sm-10 col-xs-12">
<div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
<input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="brand" name="brand">
<option value="0">All Brands</option>
<option value="9618">Brand 1</option>
<option value="10268">Brand 2</option>
<option value="10232">Brand 3</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-12">
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Created">status 1</option>
<option value="Downloaded">Status 2</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-12 pull-right">
<input class="hidden" id="search_txt" name="search_txt" type="text" value="">
<input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
</div>
</div>
</form>
</div>
One other way is to make bigger your cells :
Bootply : http://www.bootply.com/KzRD6fb0Pw
Code :
<div class="col-md-12 row widget-simple remove-padding-top margin-bottom-10">
<form accept-charset="UTF-8" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="form-group credits-daterange">
<label class="col-sm-2 col-xs-12 control-label vertical-center" for="start_date">Date</label>
<div class="col-sm-10 col-xs-12">
<div class="input-group input-daterange" data-date-format="yyyy-mm-dd">
<input class="form-control text-center" id="start_date" name="start_date" placeholder="From" required="required" type="text" value="2013-08-01"> <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
<input class="form-control text-center" id="end_date" name="end_date" placeholder="To" required="required" type="text" value="2015-08-03">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-2 col-xs-12">
<div class="form-group">
<select class="form-control" id="brand" name="brand">
<option value="0">All Brands</option>
<option value="9618">Brand 1</option>
<option value="10268">Brand 2</option>
<option value="10232">Brand 3</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-2 col-xs-12">
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Created">status 1</option>
<option value="Downloaded">Status 2</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-2 pull-right">
<input class="hidden" id="search_txt" name="search_txt" type="text" value="">
<input class="btn btn-primary" id="agencies-export-excel" name="commit" type="submit" value="Export to Excel">
</div>
</div>
</form>
</div>