I need my 2 inputs which placed inline to have width of parent div which defines col-md-6 and col-md-3. Right now inputs are aligned correctly but have width which in one case less than col-md-6 and in second case more than col-md-3. How to make this inputs have width col-md-6 and col-md-3 correspondingly?
<div class="col-md-9">
<form action="" role="form" class="form-inline">
<div class="col-md-6">
<div class="form-group">
<label for="iR" class="sr-only">i R</label>
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="iS" class="sr-only">i S</label>
<input type="text" class="form-control" id="iS" placeholder="some mid long explanation 2" />
</div>
</div>
</div>
As others have mentioned, you need to specify custom widths with inline forms. From the docs:
Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
In your case, you need to specify width: 100% for both the input and the form-group:
<div class="form-group" style="width: 100%">
and
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />
Working example in JSFiddle
Just put style="width: 100%;" on the input; Btw, you are missing a form closing tag.
Also if you look at bootstraps for any elements you set up most of the time they leave a bit of margins. So if you don't want any margins just change the margins to 0.
Related
In Bootstrap, container-fluid has some padding, which I want. However, things inside a horizontal form seem to be ignoring the padding and getting pushed all the way to the edges of the container (I've added a border to the container here for illustration):
<div class="container-fluid" style="max-width:900px;border:1px solid black">
<div class="alert alert-danger">Correct, obeys container-fluid padding.</div>
<form class="form form-horizontal">
<div class="form-group alert alert-danger">Too Wide</div>
<div class="form-group panel panel-default">
<div class="panel-heading">Too Wide</div>
<div class="panel-body">Body</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Too far left</button>
</div>
</form>
</div>
A working example is on Bootply.
In that example, the first alert is as intended. Everything else inside the form is too wide.
Now, not shown in the Bootply, but if I add an input to the form:
<div class="form-group">
<label class="control-label col-sm-2" for="field">Label</label>
<div class="col-sm-10">
<input class="form-control" id="field" type="text"/>
</div>
</div>
The input is padded correctly, unlike the alerts and panels, which I don't understand.
How do I get all the things in the form to obey the padding? This is especially important to me because on small screens it pushes everything right to the edge and doesn't look that great.
The only thing I could think of to try was enclosing the form in a plain div, which had no effect.
I also achieved some success by manually setting the padding on the form, but that doesn't feel right, and it also breaks the properly padded input elements. Plus, it's not too robust in that I can't guarantee my hard-coded padding will match the container's usual padding which I have no control over.
//This will sort out your panels and alerts. (.less code)
//Or you could just put a .col-xs-12 on them.
.form-horizontal {
> .panel,
> .alert {
margin: 0 #grid-gutter-width / 2; //(or just 15px if your using bootstrap dist)
}
}
Then for your input groups, just using the col-sm-2 on your labels like you have done above.
And for your form group with the submit button simple put a col-xs-12 on it.
The reason for this is: .form-groups inside .form-horizontal receive margin-left: -15px; (The same as grid-gutter-width).
The intended design is that you use form-horizontal as a substitute for a .row and then use .cols inside. Or implement how you choose to fit your design.
Reference : bootstrap forms horizontal
Do your inputs like this
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
Do your submit button like this
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
You can do your alerts like this if you like
<div class="col-xs-12">
<!-- alert here -->
</div>
I have the following html. My label is not aligned vertically in the center compare to the input field.
<div class="row">
<div class="col-sm-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-sm-2">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
How can I set both input and label have the same height ?
JSFiddle
https://jsfiddle.net/mLcrv19z/
To get the two elements (label and input) to align vertically, try using the form-inline class, along with form-group. Here's what that looks like:
<div class="form-inline">
<div class="form-group">
<label for="investmentbalance">Investment Balance</label>
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" />
</div>
</div>
https://jsfiddle.net/mLcrv19z/10/
You can use both padding or line-height.
Add to label:
padding: 7px;
or:
line-height: 34px;
The input height is 20px; the padding 6 and the margin 1. So here's the calculation:
padding: 6 + 1 = 7px
line-height: 20 + 7 (top) + 7 (bottom) = 34px
You may use margin-top:3%; to the label CSS
The value is based on the jsfiddle example. It may change depending on the application you are developing.
Issue is not with your alignment but the classes you have defined. You need to define bootstrap grid class for every width. Otherwise grid would appear different in different resolutions. Check this out.
<div class="col-sm-10 col-md-10 col-xs-10">
<div class="col-sm-2 col-md-2 col-xs-2">
Fiddle Solution
Another solution is to use a custom class, setting it's line-height equal to the parent's height and aligning it in the middle.
.middle {
vertical-align: middle;
line-height: 34px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row middle">
<div class="col-xs-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-xs-7">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
</div>
I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>
With Bootstrap 3.0, I am have a couple of questions/issues:
1) For learning, how is possible to have the div with class col-sm-5 small than the child div elements that are specified longer with class="col-sm-4" + class="col-sm-4" which equals 8?
2) I want "Pick A Date" text to come before the 2 input elements. However, it's coming after them which makes no sense to me.
<form name="dateFrom">
<div class="form-group well col-sm-5">
<div class="form-group">
Pick A Date
<div class="col-sm-4">
<input type="text" class="form-control datepicker" placeholder="From date" name="search" class="form-control">
</div>
<div class="col-sm-4">
<input type="text" class="form-control datepicker" placeholder="To date" name="search1" class="form-control">
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg- -->
</form>
1) the widths of the columns are defined in percent, col-sm-5 has is 5/12 of the width of its parent and the col-sm-4 is 4/12 of the width of its parent which is in your case the form-group.
2) the elements with the class col-sm- have float: left, as your text Pick A Date does not have any floating attribute, the two div with col-sm- float to the left thats why your text appears on the right. If you want it in the correct order surround it with a div and add e.g. col-sm-4 to it.
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.