SEE: http://jsfiddle.net/aGy2P/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<form method="post" action="">
<fieldset>
<div class="control-group">
<div class="controls">
<select class="span6" name="range-from:price" id="price_from">
<option value="">Min Price</option>
<option value="2000">$2K</option>
<option value="4000">$4K</option>
<option value="6000">$6K</option>
<option value="8000">$8K</option>
<option value="10000">$10K</option>
<option value="15000">$15K</option>
<option value="20000">$20K</option>
<option value="25000">$25K</option>
</select>
<select class="span6 pull-right" name="range-to:price" id="price_to">
<option value="">Max Price</option>
<option value="2000">$2K</option>
<option value="4000">$4K</option>
<option value="6000">$6K</option>
<option value="8000">$8K</option>
<option value="10000">$10K</option>
<option value="15000">$15K</option>
<option value="20000">$20K</option>
<option value="500000">$25K+</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls">
<select class="span6" name="range-from:model_year" id="model_year_from">
<option value="">Min Year</option>
<option value="1990">1990</option>
<option value="2000">2000</option>
<option value="2005">2005</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<select class="span6 pull-right" name="range-to:model_year" id="model_year_to">
<option value="">Max Year</option>
<option value="1990">1990</option>
<option value="2000">2000</option>
<option value="2005">2005</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
<div class="span8">
</div>
<div class="span2">
</div>
</div>
</div>
</body>
</html>
If you make the result pane wide enough, you'll see the select fields try to go in an inline layout. I'm having a bit of problem with this, but it's not clearly seen in JSFiddle.
My screen shot
<-- from Chrome, aligns correctly
However, in FF and IE, the "Max Year" select is not horizontally aligned with "Min Year"; instead, it's much lower, like this:
<-- from FF
Initially, I thought it may have something to do with the contents of "Min Year" or "Max Year", so I started tweaking them. But nothing fixed it. When I deleted the node for "Min Price" and "Max Price", then "Min Year" and "Max Year" were suddenly OK.
Any ideas what's wrong?
Well the issue is the following:
<div class="span2">
...other code
<div class="span6">
your dropdown
</div>
...other code
</div>
You are trying to put a span6 inside a span2 container, which just isn't big enough to contain that.
You need to change the span2 to a span12 like so:
http://jsfiddle.net/3N754/
Or note that if you want to put two span6 inside a span 2 you need to have more <div class='row-fluid'>
E.g.
<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
I also believe the problem is white spaces between elements ( and there is one between the second pair of select tags ). They do really matter in inline and inline-block elements as they force the elements to wrap like words do when hey exceed their containers width. Two simple solutions are, either remove the spaces between elements, or add a white-space:nowrap; rule on the parent element.
First, you put a Jsfiddle that doesn't reproduce your problem (and that has another problem: the widtch is too small), I don't get the point of that.
Anyway, you put span6 on your select: <select class="span6"
But you didn't put them in a <div class="row-fluid"></div>.
This kind of problem is often caused by space between elements.
Because if one element occupies 50% and the second 50% too, a simple space between them makes them bigger than 100%.
Usually you can:
remove spaces / breakline between your elements (in this case, your selects)
set the fontsize to 0 to the container so that spaces "don't occupy spaces". :)
This might not be the solution to your particular case but maybe for others with the same kind of problem.
Let me know.
EDIT:
please look at this modified fiddle: I am using chrome on MacOs and we know results might be different but when I tried your example, every select was on a different line.
In the fiddle here http://jsfiddle.net/3nJYY/1/, I have removed the spaces /breakline between the selects of the first group. Now they are displayed on the same line (what you were looking for), while the selects in the second group are placed on different lines.
here is the important part, note that I've removed any space or breakline between the closing select and the second one:
<div class="control-group">
<div class="controls">
<select class="span6" name="range-from:price" id="price_from">
...
</select><select class="span6 pull-right" name="range-to:price" id="price_to">
...
</select>
</div>
</div>
The bootstrap-combined.min.css file you are including includes Bootstrap Responsive. The compiled responsive styles have very precise width percentages for .span* elements. After playing around with the code and developer tools in Chrome, I was able to see that different browser widths indeed produced different results.
Ex. 1: browser width at least 1200px
Ex. 2: browser width between 786 and 969px
It seems these widths were made for divs without taking into consideration excess width from select boxes.
A css ninja may have a better solution than this. But setting your select width slightly smaller should solve the problem without making the form look too bad.
<style type="text/css">
.row-fluid select.span6 {
width: 48%;
}
</style>
48.0% seemed good to me for select.span6, though since these are native select boxes, width may vary between operating systems. (I am using OSX.) Use different values above and see what works best for all possible browser widths.
Furthermore, if you don't need responsive capabilities (i.e. if you don't care about your site being mobile-optimized), include only the regular bootstrap css. Your site will then be displayed one way for all viewports and you won't have to worry about how it looks on all devices.
I think your problem is that when you apply the .span6 style to a select, the browser will apply the 48,.... percentage size, but then will add some extra-length to render the component, making it too long to fit, and therefore slide under the other one.
As a workaround, I would propose to wrap the select in a div, and apply the .span6 class to the div instead so that you are sure that the browser renders the proper length. Then you would have to add give a width of 100% to your select to fit in your div
http://jsfiddle.net/SkMZ5/2/
example :
<div class="controls">
<div class="span6">
<select style="width:100%" name="range-from:model_year" id="model_year_from">
<option value="">Min Year</option>
<option value="1990">1990</option>
<option value="2000">2000</option>
<option value="2005">2005</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
</div>
<div class="span6 pull-right">
<select style="width:100%" name="range-to:model_year" id="model_year_to">
<option value="">Max Year</option>
<option value="1990">1990</option>
<option value="2000">2000</option>
<option value="2005">2005</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
</div>
</div>
Related
I have the following code on my page for dropdown list box. No matter how much I try, I cannot make the width of the dropdown box bigger. Below is my code:
<div class="form-group row">
<div class="col-sm-1"> </div>
<label for="inputTitles" class="col-sm-3 col-form-label"><asp:Label ID="lblDocType" runat="server"></asp:Label></label>
<div class="col-sm-8">
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
I tried to put this style sheet in the asp:DropDownList class:
<style>
.ddlwidth {
width: 1000px !important;
}
</style>
<asp:DropDownList class="form-control ddlwidth" ID="ddlDocType" runat="server" OnSelectedIndexChanged="DocType_Changed" AutoPostBack="true" Width="700" >
That didn't work either. If I remove the form-control and then increase the width of the dropdownList then the width becomes bigger. The reason, I don't want to remove the form-control class because I want to keep the look and feel of form-control class.
How can I increase the width of the dropdownlist box without removing the form-control class?
Below is what it looks like on my web page:
Try this in your style sheet:
.form-control {
width: 394px;
And then:
<select class="form-control" aria-label="Default select example">
<option selected>--Please Select a title from the list-</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
How do I make a simple Bootstrap Horizontal Form that looks correct on phone, tablet and computer. Namely I want the combos to be aligned as shown in the example, but I don't want the combos larger than necessary, and I only want a small gap between label and combo. Then when screen size is too small to fit in label and combo I want them stacked.
Specifically the Boostrap example use up the whole 100% width I dont want that, I don't want the combo to be wider then necessary and I dont want a big gap between the label and the combo.
I tried adding col-auto but then the combos no longer horizontally aligned with each other.
I have now tried adding col-[1-12] values for label and combo as described in https://getbootstrap.com/docs/4.1/components/forms/#column-sizing but then it didnt stack correctly when goes to small phone.
I then tried using col-md so the totals less than 12 but it doesn't look right on main screen because now both the label and combo take the same space so they have half the screen each and are nowhere near each other.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
<div class="form-row">
<label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
Genre
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
<option value="0">
Always replace values
</option>
<option value="1">
Always add values
</option>
<option value="2">
Replace if empty
</option>
<option selected="selected" value="3">
Never Replace
</option>
</select>
</div>
</div>
<div class="form-row">
<label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
From
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
<option value="0">
Discogs Style
</option>
<option value="1">
Discogs Genre
</option>
<option value="2">
Discogs Style and Genre
</option>
</select>
</div>
</div>
</div>
The problem is that Flexbox doesn't work in rows/columns the way a Table does. You can use col-sm-auto to get each label to shrink-to-fit, but then the labels/inputs won't align vertically down the page...
It sounds like you want to shrink the label column to fit the width of the widest label. This could be done by putting all the labels in 1 column, and inputs in another column, but then each label/input won't stack together on mobile screens.
There's no elegant Bootstrap-only solution to this problem. You can use Tables, CSS grid, or the option described by #Toan Lu in the comments.
Bootstrap Grid option
I'd recommend simply using col-sm-2 or col-sm-3 for the labels (fitting them to approx. the widest label) and text-truncate to ellipsis(...) the overflowing text until they stack vertically on mobile...
<div class="form-row">
<label class="col-form-label col-sm-2 text-truncate">
Label
</label>
<div class="col-sm-3 col-md-2">
<select>..</select>
</div>
</div>
https://codeply.com/go/e3mDrmMv7k
Table option
With this option, the width:1% is used on the labels so that they shrink to the width of the widest. Use text-nowrap to stop the labels from wrapping. Each form row is a d-table-row and each label is a d-table-cell...
.col-form-label.d-sm-table-cell {
width: 1%;
}
<div class="container py-3">
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Genre
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
<div class="form-row d-table-row">
<label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
Longer label here
</label>
<div class="col-sm-3 col-md-2">
<select>
..
</select>
</div>
</div>
</div>
https://codeply.com/go/e3mDrmMv7k (see 2nd option)
The table option makes the divs into tr/td but also works responsively allowing the fields to stack vertically on mobile. Read more on [d-table classes](Yes, part of Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation).
CSS Grid option
One other (non-Bootstrap 4) method is using CSS grid. Make the row display:grid Use the fr sizing on the 2 grid-template-columns across the row.
.d-grid {
display: grid;
grid-template-columns: 0fr 1fr;
}
https://codeply.com/go/9Z7Hg2tl1H
Works as expected if you use earlier version of bootstrap css:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
I'm using Bootstrap 3 and when my system tries to display a very long text in the select box, the option text gets truncated (but the element is displayed with the right width). This happens only in Google Chrome for OS X.
The Code (http://jsfiddle.net/arthurvasconcelos/h21n6Lwx/):
<div class="content">
<div class="row">
<div class="col-md-3">
<form class="form-horizontal">
<select class="form-control">
<option value=""></option>
<option value="0">65a073e6-066b-11e6-b512-3e1d05defe78_21e23745-838b-44bc-b639-eb02bd04f41f_really_big_name_for_a_option</option>
<option value="1">82e027b3-a9f1-4274-8056-a3fe67a1f83d_option_test_long_name</option>
<option value="2">shortter</option>
<option value="3">short test</option>
<option value="4">normal test</option>
</select>
</form>
</div>
</div>
</div>
Screenshot on Linux:
Screenshot on OSX:
I have a Twitter Bootstrap well, which contains a Select2 component.
Demo can be viewed at http://jsfiddle.net/U4KTM/1/
There are two problems in Chrome (not evident in FF or IE):
There is an overflow issue in chrome causing vertical scrollbars in the well. This seems to be solved by the following css:
.tab-content {
overflow: hidden;
}
The second problem in Chrome is that selecting an item in the bottom dropdown causes a weird jumping issue in the well, and then some of the well content dissapears off the top.
The code in question is as follows:
<div class="well">
<ul class="nav nav-tabs">
<li class="active">First tab</li>
<li class="">Second tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel1">
<div class="control-group">
<label for="bar" class="control-label"></label>
<div class="controls">
<select name="bar" class="selector">
<option value="0">First Option</option>
<option value="1" selected="selected">Second Option</option>
<option value="2">Third Option</option>
</select>
</div>
</div>
<div class="control-group">
<label for="bar" class="control-label"></label>
<div class="controls">
<select name="bar" class="selector">
<option value="0">First Option</option>
<option value="1" selected="selected">Second Option</option>
<option value="2">Third Option</option>
</select>
</div>
</div>
</div>
</div>
</div>
Try to overwrite this CSS class .tab-content:
with:
.tab-content {
overflow:visible;
}
The style is located in :
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css
line: 608
I ran into this issue as well. Seems you need to make a slight change to the select2.js and comment out the height in the _makeMaskCss. This seem to happen with Bootstrap Responsive for me. The demo seems to work just fine.
function _makeMaskCss() {
return {
width : Math.max(document.documentElement.scrollWidth, $(window).width())//,
//height : Math.max(document.documentElement.scrollHeight, $(window).height())
}
}
I'm trying to get one div to float left, and one div to float right, but have a form in between, the form has 2 select elements(drop down boxes) in it.
I can get it so I have:
Div<------------->Text<------------->Div
but not
Div<------------->Form<------------->Div
If I just have an empty form element than it works like the text, but as soon as I put the 2 selects in then the right div drops down a line, the same happens if I put a textbox(input, type text) in place of the 2 selects.
This is the code I have so far (Note I'm not using stylesheet for the moment, but I will eventually)
<div class="nav" style="text-align:center;">
<div class="prev" style="float:left;">« July</div>
<form method="get" action="" id="form1">
<select id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</form>
<div style="float:right;" class="next">September »</div>
</div>
The HTML <form> element is by default a block element like as <div> is. It will always go in its own new line. You need to either display it inline or to float it to left as well. Since the two other div's are already floated, easiest is to just float the form as well. E.g.
<form style="float: left;">
That said, consider placing CSS style in its own CSS file and reference by ID's and classes.
There is a much easier way to do this. Css "display: inline-block" is the easiest thing to use. Contrary to popular belief, it DOES have perfect crossbrowser support if the correct tricks are used. Here is an example: (zoom and *display are to make IE play nice)
<html>
<head>
<style type="text/css">
.element
{
display:inline-block;
zoom:1;
*display:inline;
}
</style>
</head>
<body>
<div class="element">
Stuff in here....
</div>
<form class="element">
<input type="text" name="testInput" />
</form>
<div class="element">
More stuff
</div>
</body>
</html>
The reason is that you have not assigned width property for divs and forms. If you have floated 2 divs, form should also be floated.
<div class="nav" style="text-align:center;">
<div class="prev" style="float:left;width:200px; background-color:#454545">« July</div>
<form method="get" action="" id="form1" style="width:200px; background-color:#454545; float:left">
</form>
<div style="float:right;width:200px; background-color:#454545" class="next">September »</div>
</div>
The width is random given. Use this tool to decide the width value
I had to ditch the floating, as none of the answers really worked (don't want to set widths, jdc0589's answers didn't float the divs left and right, and when I did it broke, and floating the form left obviously made it not in the center) so I had to use absolute positioning:
<div class="nav" style="text-align:center; position:relative;">
<div style="display:inline; position:absolute; top:0px; left:0px; min-width:105px;" class="prev">« July</div>
<form method="get" action="" id="form1">
<select style="" id="months" name="month" onchange="javascript:document.getElementById('form1').submit();">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8" selected="selected">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select style="" id="year" name="yr" onchange="javascript:document.getElementById('form1').submit();">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</form>
<div style="display:inline; position:absolute; top:0px; right:0px; min-width:105px;" class="next">July »</div>
</div>