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:
Related
Here is the preview of the drop down list
Then, when I click on the dropdown to scroll the items
I think it's because I have too many items in the dropdown?
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<!-- Marché -->
<label for="filterForMarkets" class="form-label">Marché</label>
</div>
<div class="col-4">
<select id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
<option value="">
Tous les marchés
</option>
<option *ngFor="let m of markets$ | async" [value]="m.marketId">
{{ m.name }}
</option>
</select>
</div>
</div>
If for example, I display 3 items only, I have no problem.
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<!-- Marché -->
<label for="filterForMarkets" class="form-label">Marché</label>
</div>
<div class="col-4">
<select id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
<option value="">
Tous les marchés
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
Unfortunately, I need my loop, is there a way in css to display my items correctly, please?
Put size in <select ...
<select size="3" id="filterForMarkets" name="filterForMarkets" style="min-width: 440px" class="form-select" [(ngModel)]="search.market">
If didn't work just let me know.plz down votedown right away :)
You can set a max height to your select field using CSS:
select {
max-height: 180px
}
Either create a class and use it instead of using the select global selector but using the global selector will just handle all your select fields which is good too so, You decide!
I have a div with 2 divs inside of it, each with a ul of content, so it looks like two columns in the view. I'm using window.print and css to print these out, Chrome and Safari work fine, but Firefox is turning the 2 columns into 1.
<div class="Sides">
<div class="left side">
<ul>
<li class="List">
<div>
<div>
<div class="circle">
1
</div>
<select>
<option disabled="disabled">
Select
</option>
<option selected="selected" value="1">
1
</option>
</select> <label>Label</label>
</div>
<div class="form">
<div class="A">
<span >A</span><span></span>
</div>
<select >
<option selected="selected" value="A" >
A
</option>
<option value="B" >
B
</option>
<option value="C">
C
</option>
</select><label>Select</label>
</div>
</div>
</li>
<li class="List">
<div>
<div>
<div class="circle">
1
</div>
<select>
<option disabled="disabled">
Select
</option>
<option selected="selected" value="1">
1
</option>
</select> <label>Label</label>
</div>
<div class="form">
<div class="A">
<span >A</span><span></span>
</div>
<select >
<option selected="selected" value="A" >
A
</option>
<option value="B" >
B
</option>
<option value="C">
C
</option>
</select><label>Select</label>
</div>
</div>
</li>
</ul>
</div>
</div>
Here it is on Chrome/Safari:
Here it is on Firefox:
I've tried column-count, column-fill, float (left/right for diff divs), min-width: 0 / min-height: 0, and I can't seem to get the 2 columns to appear.
Anyone have any other suggestions for how to get this to work?
So in case anyone ever runs into this issue again I had to set the #media print to min-width: 0px; in order to get the columns to print out like they should. Then, to get them the width I needed I had to set a width: 500px; (or whatever width you need) to get them to print out like I needed them. Such a strange bug, but it's fixed now!
I am having trouble implementing a form in Twitter Bootstrap2.
I've set up a JS Fiddle http://jsfiddle.net/manishap/WNSCW/15/
Here is the code:
<div class="container">
<div id="ratingSubectives" class="row-fluid">
<form class="well" >
<fieldset>
<div class="control-group span3">
<label class="control-label" for="select01">Aaaaaaaaaaaa</label>
<div class="controls"><select id="select01">
<option value=""></option>
<option value="A">A</option>
<option selected="selected" value="B">B</option>
<option value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select02">Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</label>
<div class="controls"><select id="select02">
<option></option>
<option selected="selected" value="A">B</option>
<option value="B">B</option>
<option value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select03">Ccccccccccc</label>
<div class="controls"><select id="select03" disabled>
<option value="A">A</option>
<option value="B">B</option>
<option selected="selected" value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select03"> </label>
<div class="controls"><button type="submit" class="btn">Submit</button></div>
</div>
</fieldset>
</form>
</div>
I'm trying to place 3 select controls with labels horizontally across a div. It looks right in English with short labels. However, eventually this is a site that is delivered in multiple languages, and if the labels get long (as in the middle selector), the label text overlaps the text next to it. How do I get the text to wrap?
I tried adding a max-width: 100%, as per another answer and that didn't work. Maybe I put the labels in divs instead of label tags...
Thanks for any suggestions.
Use the word-wrap attribute to break the word:
.control-label {
word-wrap: break-word;
}
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>
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>