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 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>
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>