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
Related
I am fairly new to Bootstrap and I'm trying to make a simple form, all elements of which are in a single line on the screen. My html code for the form looks something like this:
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label>Search by:</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>Something:</label>
<input class="form-control" type="text">
</div>
</div>
</fieldset>
</form>
By default, the labels for my input fields appear about the input fields. I want them to be on the left side of the input fields. I've googled and checked on here how to implement this, but none of the solutions I found have worked (I tried adding classes to my form and changing their CSS, and tried using bootstrap's form-inline functionality).
Does anyone know how I could make the form look how I want it to look?
You will want to make two modifications to each form group in order to utilize the bootstrap grid system.
not sure which version of BS you are using but for grid it is the same concept: https://v4-alpha.getbootstrap.com/layout/grid/
You will want to use bootstrap grid system to define that the label and input on are the same line. Keep in mind that there are 12 columns in 1 row so items you want to be on the same line must add up to 12.
Add the following classes to your label: "col-lg-2 col-md-2 col-sm-2 control-label"
Wrap your input in a div and add the following classes: "col-lg-10 col-md-10 col-sm-10"
You will notice that between these two elements, the columns add up to 12 so in the bootstrap grid system, they will be on the same line.
(I also wrapped this in a container just for a more tidy display on this post)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</div>
I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</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 a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>
I have some "col-md-12" divs on forms that appear to "cover" preceding inputs such that they are not clickable.
I have created a bootply with Bootstrap 3.0.0 to illustrate the issue. unclickable inputs
If I make the same bootply with bootstrap 3.0.3 then the input fields are now accessible clickable inputs
What I want to know is whether this is a bootstrap bug that has been fixed or whether my layout is breahing some rule or other?
you need to put your cols into a div with the row class
<form>
<div class="row"> // HERE
<div class="col-md-6">
<label class="control-label col-md-4">Home Phone:</label>
<div class="col-md-8">
<input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-md-4">Work Phone:</label>
<div class="col-md-8">
<input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
</div>
</div>
</div>
<div class="row"> // AND HERE
<div class="col-md-12">
<label class="control-label">Notes:</label>
<textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
</div>
</div>
</form>
If you use medium size columns col-md- you can only have total 12 column units per each <div class=row>.
So, don't put more than total 12 units of col-md instead one row.
I assume this is limitation of doing layouts with columsn, floating divs and web page rendering legacy.