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
Related
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 would like how to right-align the control labels next to the SelectBoxIt dropdownlists in correspondence with the "Process Date From" label which would push the SelectBoxIt controls over accordingly.
The "Process Date From" label is in column 1 as is the control labels next to the SelectBoxIt dropdownlists but they are not right aligned like the "Process Date From" label.
I've tried several bootstrap classes, but can't get it tow work....
Here is my code, and below that is the image:
HTML
Position:
Warranty Manager
Warranty Admin
MFR Code/Dsc:
User:
Select All
JM_WhyManager_1
Sent Proc Status:
Select All
Successfully Sent
Unsuccessfully Sent
Process Date From:
To:
After further insight, I got away from the traditional grid-system layout for horizontal forms to my own dismay...
I corrected this by adding the "col-sm-2" class on the label control for the select box and took it away from the outside div which contained the label & selectbox controls.
I also wrapped the selectboxit control in a div and put the "col-sm-2" class on it.
All of the above corrected the error.
Below is my code and below that is the updated screen shot.
HTML
<div class="container nopadding">
<div class="form-group">
<div class="control-group">
<label class="control-label col-sm-2" for="ddlAppealTransmissionLogPosition">Position:</label>
<div class="col-sm-2">
<select id="ddlAppealTransmissionLogPosition" class="form-control">
<option value="Warranty Manager" selected>Warranty Manager</option>
<option value="Warranty Admin">Warranty Admin</option>
</select>
</div>
</div>
<label class="col-sm-2 control-label" for="txtAppealTransmissionLogPositionManufacturerCode">MFR Code/Dsc:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="txtAppealTransmissionLogPositionManufacturerCode" placeholder="Enter Manufacturer">
</div>
</div>
<div class="form-group">
<div class="control-group">
<label class="control-label col-sm-2" for="ddlAppealTransmissionLogUser">User:</label>
<div class="col-sm-2">
<select id="ddlAppealTransmissionLogUser">
<option value="Select All" selected>Select All</option>
<option value="JM_WhyManager_1">JM_WhyManager_1</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label col-sm-2" for="ddlAppealTransmissionLogSentProcessStatus">Sent Proc Status:</label>
<div class="col-sm-2">
<select id="ddlAppealTransmissionLogSentProcessStatus">
<option value="Select All" selected>Select All</option>
<option value="Successfully Sent">Successfully Sent</option>
<option value="Unsuccessfully Sent">Unsuccessfully Sent</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="dteAppealTransmissionLogRequestedFromDate">Process Date From:</label>
<input class="col-sm-2" id="dteAppealTransmissionLogRequestedFromDate" placeholder="From Date" type="text" />
<span class="label label-default">To:</span>
<input class="" id="dteAppealTransmissionLogRequestedToDate" placeholder="To Date" type="text" />
</div>
</div>
I m a newbie in Bootstrap and I have encounter a problem as I wan to display a select box in block style and another form group beside.
Here is my code
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</div>
Current Output is
My desire output is display both form group class div in inline method. But currently output show everything in inline while not div only. Is there any method to do so?
If possible write the HTML as follow-
<form class="form" role="form">
<div class="form-inline>
<div class="form-group">
<label for="EventType">Event Type</label>
<select class="form-control">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
</div>
</form>
Again you can do this with the HTML you have provided. In this case, you have to write some custom CSS as follow-
.form-group{
display:block;
clear:both;
width:100%;
}
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>
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.