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
Related
I have this html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative" type="text">
</div>
</div>
</div>
</div>
when I apply form-control then the input goes till the end of the parent container.
Here I will need to write numbers on the input so it will be too big.
How can I decrease its size ?
If I try to apply custom style
.form-control {
width:200px !important;
}
then it starts to be inline-block instead like block element.
You can use Bootstrap's column sizing on form controls. Here I'm using col-* for various sizes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-4" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-6" type="text">
</div>
<div class="form-group">
<label class="form-control-label" for="salary" name="salary">Specify the salary for <span
class="user-detail">{{user?.first_name}}</span></label>
<input id="salary" class="form-control form-control-alternative col-8" type="text">
</div>
</div>
</div>
</div>
See Bootstrap's column sizing docs.
I am using bootstrap cdn and I have the following form that creates a drop down box. Strangely the legend tag is correctly aligned to the left of the page, however the selector box is somewhat indented on the page towards the center. How can I move the selector box to align to the left of the page so its lined up with the legend tag?
<form class="form-horizontal" action="{{ url_for('db_selected') }}" name="Item_1" method="POST">
<fieldset>
<legend>Select a Database</legend>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Database:</label>
<select id="DB" class="form-control" name="Item_4" style="width: 70%" >
<option></option>
{% for item in coll_name %}
<option value="{{item}}">{{item}}</option>
{% endfor %}
</select>
<br>
</div>
<div class="form-group">
<div class="col-sm-10 col-lg-offset-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</fieldset>
</form>
I have added a sample output of your code. So, please check the updated DOM also added some css.
select#DB {
display: inline-block;
}
.control-label{
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="fluid-container">
<form class="" action="{{ url_for('db_selected') }}" name="Item_1" method="POST">
<fieldset>
<legend>Select a Database</legend>
<div class="form-group">
<label for="select" class="control-label">Database:</label>
<select id="DB" class="form-control" name="Item_4" style="width: 70%" >
<option></option>
<option value="item">item</option>
<option value="item">item</option>
<option value="item">item</option>
</select>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</fieldset>
</form>
</div>
You can also check this Fiddle. Hope it will help you.
The button in the jsFiddle below is vertical aligned with the labels. That doesn't look good and I would like it to align with the select box instead.
How do I do that?
jsFiddle
<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>
I personally wouldn't add the margin-top, if you can avoid it. Purely down to the fact that when you look at it on a different device you will probably need to remove said margin.
I would add an "empty" form label above the button:
<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label" style="display: block;"> </label>
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>
Flexbox, I find myself coming back to how good it is over and over again.
So what we want if for the button to move down so it's against the bottom of the block, not the top. We could move it a number of ways, but they all rely on you getting the number of pixels or percent right, and that seems like a lot of effort.
Here's the flexbox 'lazy' solution
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 50px;
}
.form-group {
display: flex;
}
.form-group .flex-down {
align-self: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3 flex-down">
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>
Hope you find this helpful.
I added this to the CSS
.form-group {
display: flex;
}
.form-group .flex-down {
align-self: flex-end;
}
and the class flex-down to the div containing the button.
try this.
add one label tag above the button with space (no content)
inside button use the class form-control.
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 50px;
}
<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label"> </label>
<button type="button" class="btn btn-primary form-control">Manage customers...</button>
</div>
</div>
</form>
</div>
do this as said by #Andrew,
button{
margin-top:25px;
}
Add 25px top margin to your button .
.btn-primary {
margin-top: 25px;
}
You can translate the Y position using transform: translateY(75%);. Updated Fiddle
Add below code to your CSS:
button {
transform: translateY(75%);
}
I wouldn't change the button margin as it will affect every button.
How about adding an invisible label and the button take all the space of the column? I think it looks nicer on devices too.
See example bellow:
http://jsfiddle.net/Dhanck/fpurv0L9/7/
<div class="col-sm-3">
<label style="visibility:hidden">das</label>
<button type="button" class="btn btn-primary btn-group-justified">Manage customers...</button>
</div>
I am using bootstrap columns where i have a problem with screen resolution, Below select field text is not visible completely when i used screen resolution 1366 x 786.
How can i resolve this issue using bootstrap ?
main.html
<div class="row">
<div class="col-md-6 fieldHeight">
<div class="form-group">
<label for="oplossValDate" class="col-md-5 {{requiredstr}}">
OpLoss Validation Dates:</label>
<div class="col-md-7" ng-if="rcsaCycleDTO.cycStatLkupCode === 'RA_CYC_SETUP'">
<select class="form-control" name="oplossValDate"
id="oplossValDate"
ng-model="rcsaCycleDTO.opLossValidationDateKey"
ng-change="OplossFromAndToDate()"
ng-options="OplossValidationDateOption.id as OplossValidationDateOption.text for OplossValidationDateOption in OplossValidationDateOptions">
<option value="">Select...</option>
</select>
</div>
<div class="col-md-6 fieldHeight">
//code for these columns
</div>
</div>
Use the form tag around you <div class="form-group"> and remove the class="col-md-5" and class="col-md-7" like that:
<div class="row">
<div class="col-md-6 fieldHeight">
<form class="form-inline">
<div class="form-group">
<label for="oplossValDate" class="{{requiredstr}}">
OpLoss Validation Dates:</label>
<select class="form-control" name="oplossValDate"
id="oplossValDate"
ng-if="rcsaCycleDTO.cycStatLkupCode === 'RA_CYC_SETUP'"
ng-model="rcsaCycleDTO.opLossValidationDateKey"
ng-change="OplossFromAndToDate()"
ng-options="OplossValidationDateOption.id as OplossValidationDateOption.text for OplossValidationDateOption in OplossValidationDateOptions">
<option value="">Select...</option>
</select>
<div class="col-md-6 fieldHeight">
//code for these columns
</div>
</div>
</form>
see here for more information.
I prefer this site for all kind of code doubt: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
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>