i want make my input field longer as the same 2 fields above him, look the picture please:
My HTML code:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-3">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
I failed to do it with the boostrap grid system alone.
I cant change to col-lg-3 is not work, look at the comments.
I had the same issue and I solved adding one of the col- classes in the input itself.
In your case, replace col-lg-3 for col-lg-6 in the div and add col-lg-6 in the input as well:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control col-lg-6" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this Code............
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this
<div class="row">
<div class="form-group col-lg-12">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Replace
col-lg-3
with
col-lg-6
in class attr
Related
I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group">
<label for="input3">Input 3
<input name="input3" type="checkbox" id="input3">
</label>
</div>
<div class="form-group">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<button class="btn btn-default">Add</button>
</form>
</div>
If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form
Thanks
Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:
<div class="container">
<form class="form-inline">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
<label for="input3">Input 3
</label>
<input name="input3" type="checkbox" id="input3">
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<div class="col-xs-12 col-lg-1">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW
You can wrap those inputs with div and display:inline-block style to make them stay together.
I have a form made in Bootstrap V3. The designer wants some rows to contain two inputs, while other rows contain only one.
I've made a fiddle here.
https://jsfiddle.net/06qk4wh4/
<div class="form-group col-sm-12">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
The problem is that in the row with two inputs I get an alignment error (shown in red in the image below). It works great in col-sm-x, because then it uses the full width. But in col-md-x I try to render two inputs in one row, and I get an "alignment error" because of the percentage calculation.
Is there a simple solution for this? It must be a pretty common problem?
You can try this code.
It seems to fix your problem. I just add a row after your div(col-sm-12)
<div class="form-group col-sm-12">
<div class="row">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-md-12">
<div class="row">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
Hope this is the solution :)
Richie
In form I am using group-form, For some field it is not adjusting the space. Please see the image:
In the Image you can see that before contact field there is one space, and contact field is not adjusting the space, why is this happening?
<div class="col-md-6 row" id="addWarehouseForm" ng-show='!showForm'>
<form class="form-horizontal order-form" id="mapForm" name="mapForm">
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">Name:*</label>
<div class="col-md-9">
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">From:</label>
<div class="col-md-3 form-group">
<input type="checkbox" >
</div>
<label class="col-md-3 control-label">To:</label>
<div class="col-md-3 form-group">
<input type="checkbox" >
</div>
</div>
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">Contact Person:</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
Maybe col-md-6 is to small and you don't have enough space?
For some reason my contact form, which worked previously, is not functioning properly all of a sudden. Essentially, the input fields appear to be disabled on Firefox, even though they aren't. Firebug suggests they aren't disabled as well and this behavior only pertains to firefox, not chrome or safari.
HTML
<div class="container-fluid contact-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footer-contact-h">TELL US ABOUT YOUR PROJECT</div>
<form method="post" id="contact-form">
<div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Name" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="company" type="text" class="form-control" id="company" placeholder="Company" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-offset-2 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Email" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 form-row">
<div class="form-group">
<input name="phone" type="text" class="form-control" id="phone" placeholder="Phone" required="required" autocomplete="off">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="form-group">
<textarea name="message" class="form-control" id="message" required="required" placeholder="Details"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-5">
<div class="form-group">
<input class="form-control contact-us-button" type="submit" value="CONTACT US">
</div>
<div class="contact-status">Message Received!</div>
</div>
</form>
</div>
</div>
</div>
I was able to replicate it in jsFiddle: http://jsfiddle.net/tfdcgjh1/
You can solve it, work around, by doing the following in form-control class:
.form-control {
line-height: 1;
height: auto;
-moz-box-sizing: border-box;
}
Checkout the DEMO
The problem appears to be the padding in your .form-group input.
Remove that and the placeholder/text comes back.
Updated jsfiddle
I have the following HTML in bootstrap 3 that gives the following display:
The HTML it as follows.
In one row i have only one field, while on others I have 3. Is it possible with bootstrap to make all rows position "first" label on the same position? In this case, "Project Name", "Location", and "Project Value" will be aligned same position.
Thanks
<div class="container">
<div class="row" id="mainForm">
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtLocation" placeholder="Location">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
<div class="row top-buffer">
</div>
</div>
In the first two div.row you the .form-group with .col-sm-6. If you change it to .col-sm-4 you will get the alignment you want.
E.g.:
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
Here is a working demo http://jsfiddle.net/wmyuj7gy/.
EDIT:
If you want the first two rows to be full width you need to change the .col-sm-4 to .col-sm-12 and the inner elements to have the .col-sm-1 and .col-sm-11 class.
Also, you should nt use the .form-group class in the same div with the .col-sm-* classes because is messes with the grid's paddings.
Here is a fixed example of your code, with also some other changes in the last row to make the form perfectly aligned http://jsfiddle.net/wmyuj7gy/3/
try this one -
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtLocation" placeholder="Location">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>