I would like to get the following layout of my form using bootstrap:
Working on [Select field] [Select Button]
So: all elements are on a single row (there is plenty of space available for that).
But when I decrease the width of my browser the page switches to a weird layout as soon as it is reaching 767 pixels wide:
Working on
[Select field expanding over the whole row]
[Select Button]
While there is obviously still plenty of space to keep the form on a single row. Is there a (possibly simple) way to prevent that form to break into several lines?
I copied below the HTML page used for testing the behaviour described above :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 pull-left">
<a href="#">
Test Page
</a>
</div>
<div class="col-sm-6 pull-right">
You are logged in as abc#xyz.com
</div>
</div>
<div class="row">
<form class="navbar-form navbar-left" role="search" action="#" method="post">
<div class="form-group">
<label for="id_field1" class="control-label">Working on</label>
<select class="form-control" id="id_field1" name="field1">
<option value="1" selected="selected">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
</div>
<button type="submit" class="btn btn-default">Select</button>
</form>
</div>
<div class="row">
<div class="col-sm-12">
Stuff will come here...
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>This is a footer</p>
</div>
</div>
</div>
</body></html>
Any help and suggestions much appreciated!
Surround each item in the row with a div which has a column size class (like "col-xs-2"), like so:
<div class="form-group">
<div class="col-xs-2">
<label for="id_field1" class="control-label">Working on</label>
</div>
<div class="col-xs-6">
<select class="form-control" id="id_field1" name="field1">
<option value="1" selected="selected">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
</div>
<div class="col-xs-4">
<button type="submit" class="btn btn-default">Select</button>
</div>
</div>
As long as you use 'col-xs-...', every column on that row will stay on the same row even on small devices. Here's a fiddle.
EDIT:
Changing the form class to 'form-horizontal' changes the form-groups to behave as grid rows (see this), which allows the column sizing to stay consistent across all display sizes. Here's a new fiddle reflecting that change.
You have to read about how grid system works in bs3, Bs3 grid system
a brief sumary is that you have 12 columns in the width of your screen and you decide how many columns an elemnt takes when specifing these clases col-sm-12
this means: (column)-(small/medium device)-(will take 12 columns)
if you are using asp, it has max width in your Site.ccs so be carefull.
check this examples bs3 forms
I think you can try this one:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Its nice that you are OK with the way this works in Bootstrap, but I am not.
In fact, I try to avoid bootstrap form elements where this behavior is important.
I.e. I have a form with two radios and one drop-down which in xs all should fit on one line. I have wasted a full day trying to find a solution using bootstrap, before letting go of bootstrap for this specific row.
I still need to get the same look of the input fields with the other input fields however, (just not the same behavior), so thats what I will be spending the next few hours on, trying to find a match for "form-control".
View this code on XS-screen.
<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Reds" name="xx" checked> Reds</label>
<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Blues" name="xx"> Blues</label>
<select name="type" class="form-control form-control-sm" style="width:7rem;">
<option value='0' selected='selected'>Shirts</option>
<option value='1'>Pants</option>
<option value='2'>Socks</option>
</select>
<button name="Find" type="submit" class="btn btn-g4 btn-sm">Find</button>
Related
I can't make out the convoluted logic behind where <label> elements are actually placed. I want a form with two rows. I want a label for each row, and then an input box after that. I would like the responsive behavior that when the viewport gets narrow, the label appears just above the input. When wide the label is left and the input right.
Works OK most of the time, but sometimes the <label> behaves so strange and I struggle trying to just get a simple two row form to work. Here is the sample:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="well">
<div class="form-group">
<label class="col-md-2 control-label">
Reminder
</label>
<div class="col-md-5 container">
<input type="text" class="form-control"/>
</div>
<div class="col-md-5 container">
Minutes before meeting
</div>
</div>
<!-- Form Control TYPE Begin -->
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" value="1"
class="form-control">
Circle Meeting
</label>
<label>
<input type="radio" value="2"
class="form-control">
Operational Meeting
</label>
</div>
</div>
</div>
</div>
<body>
I just spent 15 minutes making this selfstanding, so you should be able to put this in a file and load it directly into a browser.
The result is that instead of putting the label on the left, it is put in the row above (in that DIV) instead of in the DIV that the label is declared in. I have tried a number of manipulations, but the label seems to want to "jump" out of the DIV it is defined in, and into the DIV before it, and that messes up the layout of both DIV tags which are meant to be rows in a form.
See that the "Type" label does NOT appear on the left edge, but rather floating in the previous DIV and with the last element within that DIV.
Also the layout of the radio buttons and the labels on them are very inconvenient.
I would very much appreciate if someone can explain what is going on, and how to avoid this in the future. (Not just a solution to this case, but an explanation that will allow me to avoid future cases as well.)
This should fix it; Set the form and fields tags around your form; some class changes
<div class="well">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">
Reminder
</label>
<div class="col-md-5">
<input type="text" name="textinput" class="form-control"/>
</div>
<div class="col-md-5">
Minutes before meeting
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<label class="radio-inline" for="radios-1">
<input type="radio" name="radios" id="radios-1" value="1">
Circle Meeting
</label>
<label class="radio-inline" for="radios-2">
<input type="radio" name="radios" id="radios-2" value="2">
Operational Meeting
</label>
</div>
</div>
</fieldset>
</form>
</div>
I' m using bootstrap. I want in mobile elm1, elm2 and elm3 displayed the one next to another (like inline). Look at the following code:
<div class="container-fluid">
<div class="form-group">
<label class="control-label col-sm-5 elm0" for="email">Date:</label>
<div class="col-sm-2 elm1">
<select class="form-control">
<option>1</option>
....
<option>12</option>
</select>
</div>
<div class="col-sm-1 elm2">/</div>
<div class="col-sm-4 elm3">
<select class="form-control">
<option>2015</option>
....
<option>2035</option>
</select>
</div>
</div>
</div>
However in mobile resolution the three elements goes one after another. If i put col-xs-.. instead of col-sm-.. elm0 isn't displayed well.
What i can do?
You could remove the Bootstrap classes and just add following rule to your CSS
.elm0,.elm1,.elm2,.elm3{
display:inline-block;
}
SNIPPET
.elm0,
.elm1,
.elm2,
.elm3 {
display: inline-block;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container-fluid">
<div class="form-group">
<label class="control-label elm0" for="email">Date:</label>
<div class="elm1">
<select class="form-control">
<option>1</option>
....
<option>12</option>
</select>
</div>
<div class="elm2">/</div>
<div class="elm3">
<select class="form-control">
<option>2015</option>
....
<option>2035</option>
</select>
</div>
</div>
</div>
But better to use bootstrap class and property.
here is example http://getbootstrap.com/css/#forms
adding this class on form http://prntscr.com/6okd0g
I have an app that uses Bootstrap 3. I am trying to layout a group of input controls. When all is said and done, I want my controls to look like the following:
approximately [drop down ][mi.]
from [value1], [value2]
p1 p2
[mi.] is supposed to be a input-group-addon. [value1] and [value2] are supposed to be textboxes. Finally, p1 and p2 are just styled hints. Currently, I have the following:
<div class="input-group input-group-sm">
<div class="input-group-addon">approximately </div>
<select class="form-control input-sm" type="text">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="input-group-addon">mi.</div>
</div>
<div class="input-group">
<div class="input-group-addon">from </div>
<input class="form-control input-sm" type="text" value="" />
<div class="input-group-addon">,</div>
<input class="form-control input-sm" type="text" value="" />
</div>
<div class="input-group">
<div class="hint">p1</div>
<div class="hint">p2</div>
</div>
This approach doesn't work though. The reason why is because the layout is row-based. While the input controls fill up the remaining space like I would want, they do not align with each other column wise. At the same time, when I use the bootstrap grid, the spacing gets all out of whack. Is there a way to create the layout I'm shooting for with Bootstrap? If so, how?
I'm currently using this snippet of code to get one label and its related select field displayed in row. But the final output shows two lines. The first displays the label and the second just displays the select. How to make them displayed as only one row, please?
<div class="form-group">
<label for="SE">OS</label>
<select id="SE" name="SE" class="form-control">
<option value="os">os</option>
</select>
</div>
Thanks in advance!
You can do with form-horizontal
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="SE" class="col-sm-2 control-label">OS</label>
<div class="col-sm-4">
<select id="SE" name="SE" class="form-control">
<option value="os">os</option>
</select>
</div>
</div>
</form>
Demo here: http://www.bootply.com/mLjxWBX7BS
Documentation: http://getbootstrap.com/css/#forms-horizontal
Instead of form-group use form-inline. It was designed for this purpose.
<div class="form-inline">
DEMO
The size attribute doesn't seem to be working with Twitter bootstraps css file. Am I missing something?
<div class="control-group">
<div class="controls" >
<select class="span2" multiple="multiple" id="multiSelect" size="2">
<option>Assigned1</option>
<option>Assigned2</option>
<option>Assigned3</option>
<option>Assigned4</option>
<option>Assigned5</option>
</select>
</div>
It should be working. I think you forgot a class from the container div.
<div class="control-group select optional">
<label class="select optional control-label"> *Category</label>
<div class="controls">
<select name="name" id="id" class="select optional" size="2">
<option value="">1</option>
<option value="">1</option>
</select>
</div>
</div>
Try this example and check how it works out. that's the way i'm using.