I have a Bootstrap select menu for a "state" form field. On larger devices, I have labels for each dropdown but on smaller devices, they are hidden. So in order for the smaller devices to know what the menu is for, I have the word "state" as the first dropdown option.
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">*State</label>
<div class="col-xs-5 col-lg-3">
<select id="state" class="form-control" name="state">
<option value="State">State</option>
<option value="AA">AA</option>...
Is there a better way to include the word "state" without it being an option value? Either way, how can I have it show for smaller devices, but remain hidden for larger devices (where the label will show)?
Thanks
You could use a media query to define the screensize:
#media (min-width: 768px) {
}
Then target whatever you didn't want to show within the CSS?
Related
I'm adding some new content to an old page that uses the Dojo library to create 2 panels, with a spacer in between that can be dragged left/right to expand/contract the panels. Think of it like a code editor with a split view between 2 files.
I was trying to put a form in one of the panels, and have it such that the form elements and labels stack when the panel gets small enough:
<form>
<div class="container">
<div class="form-group">
<div class="row">
<div class="col-md-1">
<label for="ID">Identifier</label>
</div>
<div class="col-md-5">
<select name="ID" id="ID">
<option value="1">1</option>
</select>
</div>
<div class="col-md-1">
<label for="Direction">Direction</label>
</div>
<div class="col-md-5">
<select name="Direction" id="Direction">
<option value="ASCENDING">ASCENDING</option>
<option value="DESCENDING">DESCENDING</option>
</select>
</div>
</div>
</div>
</div>
</form>
I noticed however that when resizing the panels, the grid behaviour wouldn't apply. It only applied when I actually resized the entire window.
Does bootstrap only use the size of the window for its grid, or can it be made such that it responds to a dynamically changing size of its parent component?
Yes, bootstap's grid system of 12 columns is based on the device or viewport size (i.e. Window size, or the visible page area inside window).
Here is for your reference
.col-xs- : Extra small devices Phones (<768px)
.col-sm- : Small devices Tablets (≥768px)
.col-md- : Medium devices Desktops (≥992px)
.col-lg- : Large devices Desktops (≥1200px)
if you are using v.3, here is the doc to refer link
Im having trouble with creating my form which is placed in a tab-pane. It seems that my labels and input
elements are crossing each others bounderies when labels are to long or the window made smaller
My code can be seen here .. please notice that labels and inputs dont stay aligned when window size changes. It seems like making rows and columns inside tab-pane is not working the same way as when they are created outside that class.
http://www.bootply.com/I3Iwdr4UVj
It's as if the input element does not know the boundry of the label ..
Are there other ways to nicely create the form inside my tab-pane ? ..
First of all, try to give a className with wider width, .col-sm-2 is too narrow for a label:
<div class="form-group">
<label class="control-label col-sm-5" for="pwd">Password:</label>
<div class="col-sm-7">
<input type="password" placeholder="Enter password" id="pwd" class="form-control">
</div>
</div>
I would suggest you always try to get the sum of 12 when you use Bootstrap classes.
I have a select form that has a list of currencies as options when my screen is at full size the select input works fine but the second I resize it to anything smalller I can only change my select option once. After that the clicks will not register and the mouse will not focus on the select unless I go back to a full sized screen. I also can't seem to reproduce the problem, I am using angular js
<div class="col-xs-6">
<select required="required" ng-model="currency" name="type" default-option="Select Currency" class="form-control m-b">
<option>Yuan</option>
<option>JPY</option>
<option>USD</option>
</select>
</div>
I use Bootstrap 3 and i have a multiple datepicker (from - to). It work well on a compute however i have problem for mobile phone compatibility. My input group overflows the screen and do not resize all the group.
In case of small device, i would like to have the the group on 2 rows:
- the first with the addon From + its datepicker
- the second with the addon To + its datepicker
how could i do ?
my html:
<form class="form-horizontal">
<div class="form-group">
<div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
<div class="input-group">
<div class="input-group-addon">From</div>
<input type="date" class="form-control" name="beginDate" id="beginDate"/>
<div class="input-group-addon" for="endDate">To</div>
<input type="date" class="form-control" name="endDate" id="endDate"/>
</div>
</div>
</div>
</form>
EDIT : I know it have to be done in css with #media, but how to get to the line only after the first datetimepicker ?
Bootstrap doesn't support multiple input fields within a single input group, regardless of browser:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
This would have to be done in the css.
So if you look at your bootstrap.css and scroll down to any #media 746px(I think its that many pixels it is for mobile) you should see examples of how they handle when the screen gets re sized. Mobile is just a screen size that is really small on a computer browser.
I'm using Twitter Bootstrap. Select boxes are always narrower than input boxes.
How can I make them the same width? Adding padding helps, but it looks ugly.
EDIT
Here is a little example - http://jsfiddle.net/DfY8z/2/
Same example with custom class applied - http://jsfiddle.net/DfY8z/3/
I can use classes like span3, span4 etc. But I want my inputs to fill all available space (and to be the same size) so I'm using custom class.
Just adding input-sm class just next to the form-control worked for me.
<select class="form-control input-sm" id="xxx" ... >
<input type="text" value="" name=""><br>
<select>
<option>Some options which is very very long... </option>
</select>
The result is the exact size of the boxes.
You appear to be using an older version of bootstrap (current version is 2.2.1). Select boxes and input boxes in newer versions are the same size when no class is applied and when resized using the span* method
If you need to set a custom size you will have to use 2 different custom classes or target select boxes and input boxes individually. The input boxes need to be 14px smaller than select boxes (as do text areas).
See updated example
// code sample because its required
<input class="myClass" type="text" value="Abcdefghijklmnop" />
<br />
<br />
<select class="myClass">
<option> ABC </option>
<option> XYZ </option>
</select>
place the control
inside a div and apply class="col-sm-2" on the div.
<div class="col-sm-2">
<select></select>
you can change col-sm-2 col-sm-3 as per your requirement
This has worked for me -
Go to bootstrap.css file and comment out the following --
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
This works:
<select style="width: 200px">...</select>