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>
Related
I've been running around trying to figure out how I can use grid to format the layout of a form. I seem to be doing exactly what other coders are doing to utilize grid in CSS but it's just not working. My goal is to put the "type" selector to the right of the pet name and the reset button to the right of the submit button. Could someone point out what I'm missing?
my css code and what the form looks like
The HTML for the form
I think your issue might be because of the <div> you have on both input and select tags. By default div are block elements and browsers will start div on a new line by placing a line break before and after a div.
One quick fix is removing the div surrounding your Pet Name and
Type. If you must, have both of them in a single div.
Preferably use 1fr in place of 50%.
You will get this desired output
You are using seperate div for individual elements, that's why the elements are displaying one after another. You can put a common div for the elements which you want to display adjacent to each other.
<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>
I have a form page with multiple div class called "inputs"
inside each div is the label of each form line and input for the form info
sample for one of them:
<div class="inputs">
<label for="ProductDesc:_">ProductDesc: </label>
<input disabled="disabled" id="invoices_ProductDesc" name="invoices.ProductDesc" readonly="readonly" type="text" value="Storage charge SC160-0000059 - 5.0 HCTZ0044 2018">
</div>
<div class="inputs">
<label for="SKU:_">SKU: </label>
<input disabled="disabled" id="invoices_ProductSKU" name="invoices.ProductSKU" readonly="readonly" type="text" value="">
</div>
Right now the display is something like:
ProductDesc
info here
SKU
SKU here
How can I make it so it becomes
ProductDesc SKU
info here SKU here
I tried using float:right on the input, and I also tried using display:inline but that didn't seem to work.
example of what i want https://imgur.com/Evc0Hvs
Wrap another div around them and set it up as a flexbox container by styling it as display: flex
display: inline-block;
Should work fine, I think there is additional styling that is effecting the overall styling.
Working example:
https://codepen.io/5amdev/pen/povqrYm
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.
This is my first question in Stack Overflow!
So, I'm trying to align (horizontal) all labels of my form, but, without success. My HTML is:
<form class="form-inline" id="form-filtro" role="form">
<div class="form-group">
<label class="control-label" for="filtrar-por">Filtrar por</label>
<select class="form-control" id="filtrar-por">
<option value="id">ID</option>
<option value="id">Nome</option>
<option value="id">Nome comercial</option>
<option value="id">CPF/CNPJ</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="filtro">Filtro</label>
<input type="text" class="form-control" id="filtro">
</div>
</form>
But, the result is:
What am I doing wrong?
I went to the bootstrap site and pasted your form code directly over the top of the example form-inline demo and things worked fine.
I did however encounter an issue if I manually styled the form to restrict it's maximum width. It looks like your form may not have enough room to display and so the label is wrapping.
Check the styles on the form in your stylesheet, or on the containing element to see if something is restricting the size.
It would also help if you posted a minimalist reproduction of your issue. ;-)
I have a Rails 3.2.8 application and I'm trying to customize some of the classes that come with the simple_form_for gem.
I have a page with many multiple select boxes on it, and to use space wisely I want the labels to appear on top of the select boxes.
I can't quite figure out how to do that. I have very little CSS experience and I'm trying to dive right in. I have used float with some success, but when you use simple_form_for you end up with a bunch of nested <div> tag for a form element. So my select box is only floating as far left as the containing <div> tag. I want it to be in line with the label. Here is a rendered example:
<div id="attribute_value_list" class="attribute_value_list">
<div class="control-group select required">
<label class="select required control-label" for="app_attribute1">
<abbr title="required">*</abbr>
Vehicle: Make
</label>
<div class="controls">
<select id="app_attribute1" class="select required select_attribute_value" size="10" name="app[attribute1]">
...
</select>
</div>
</div>
</div>
You will need to apply position:relative to the containing div (pick one that holds the label and the controls), and then position:absolute to the label, along with left and top to position it wherever you want - relative to the containing div.