I am trying to create a select element but I get unexpected results.
First, when an option element is overflowed, I cannot view the whole 4 options at once. There is a vertical scroll when option element is being overflowed (but if it wouldn't - I could see the whole 4 options).
Secondly, you can see that when you choose either of the option elements, the background is not 100% of the whole select element (and I consider the select element width to consist of the scroll extra width).
Thirdly.. You can choose the 4th option element and see that once you choose it part of the element text is hidden.
How can I fix these problems?
.x {
width: 200px;
overflow-x: auto;
}
.y {
padding: 5px;
width: 100%;
}
<select class="x" size="4">
<option class="y">Test</option>
<option class="y">Test</option>
<option class="y">Test</option>
<option class="y">Test Test Test Test Test Test Test Test</option>
</select>
Your question isn't clear, what is your expected output actually? What are you trying to do?
You can use the css you find here for this: https://github.com/filamentgroup/select-css/blob/master/src/select-css.css
But I would recommend to style a frame around the select meny instead, with a class of .select-frame for example. It's a bit easier to deal with and guarantees that it looks the same on all platforms until you click it (the native options list is then displayed).
Related
I have a dropdown list of options that I'm getting from the DB. The option data being returned is very long strings of data. I'd like to max out the width of the options.
<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
<select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
<option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
</select>
</span>
I used a CSS snippet from another question: Change width of select tag in Twitter Bootstrap
Where I'm changing the width of the select box:
.selectwidthauto {
width:50% !important;
text-overflow:ellipsis;
display: inline-block;
}
However, only the select container seems to be controlled (in width). When the options get loaded I'm still getting the full width of the text that is in the options (which contains very long strings).
How can I get my options to match the width of the select (which in this case is 50%), or any size other than full width (auto)?
Just incase what I wrote isn't explained well enough. I created a fiddle that although is not in Angular it describes what is happening:
https://jsfiddle.net/tm1qasjg/3/
I need the option values to cut off the text at a certain size. I don't want it to display the entire text value.
Your code change width, a bit, but change!
If you would put a full width you can use width: 100%, use:
.selectwidthauto {
text-overflow:ellipsis;
display: inline;
width: 100%;
}
<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
<select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
<option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
</select>
</span>
The property width: auto not equal to width: 100%, width: auto is the default value.
old question but i ended up doing it this way:
{{sValue.Name.substring(0,200)}}
shorter data makes for shorter option
can add label to show full selection
I am creating a Drop down list in HTML using select tag. I am unable to increase the gap between the options inside the select list. Below is my code. How i can increase the gap between the options?
<style type="text/css">
#height {
width: 200px;
}
#height option {
width: 500px;
height:200px !important;
}
</style>
<select id="height">
<option value="bugatti">Bugatti</option>
<option value="lamborghini">Lamborghini</option>
<option value="ferrari">Ferrari</option>
<option value="levis">Levis</option>
<option value="reebok">Reebok</option>
<option value="nike">Nike</option>
</select>
The rendering of option tags is determined by the browser and they have their own peculiar way and so the restrictions like padding and even margin of option tag works in the mozilla firefox while it doesn't works with chrome.
Summary : If its very necessary to change the appearance, you can use custom JS plugins.
That is not possible. If you really need this you should create a custom Option Menu.
No padding, margin, height or line-height are working for options.
You can go with an empty option between the elements but its not a nice solution.
One workaround I found: Increase the font size of just one element (I chose the first one, which I always keep as a blank). I did it programmatically with Javascript:
document.getElementById("myddl").options[0].style.fontSize = "xx-large";
This forces all the options to be displayed with the same (enlarged) space, even though the fontsize of the other options is unchanged.
Woooo i tried this with different browser and one thing i found that by giving padding to the option of select tag this will only work in FireFox except other Browsers like(crome,Ie,safari)...!!!!!!
Strange ..!!!!
so you can try that dropdown with or jquery Pluggins for dropdown
While answering another question I came across this weird bug. A quick search has not found an existing question, so here goes:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/4/
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option class="hidden">Item4</option>
<option class="hidden">Item5</option>
</select>
CSS:
.hidden {
display: none;
}
Q: Why is Item5 always shown, even though it is styled as hidden? Item4 is not visible. Note: I am testing this in the latest version of Chrome.
Update:
Different people are getting different results on different browsers. The following (from answer below) works on Chrome but not on the latest IE (both Item4 and Item5 are shown):
.hidden {
visibility: hidden;
}
Turns out this problem has been hit before (no surprise): How to hide a <option> in a <select> menu with CSS? but the surprising thing is that browsers do not support removing options with styling. Go figure!
Styling OPTION elements using CSS is not a reliable solution because user agents implement this very differently and non-standard. I wouldn’t call this a bug, because there is no style attribute definition in the specs for the OPTION element: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
You could use the disabled property instead:
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option disabled>Item4</option>
<option disabled>Item5</option>
</select>
And/or use JavaScript to manipulate the DOM. A pretty good start would be to target the disabled elements for semantic fallback:
[].forEach.call(document.querySelectorAll('*[disabled]'), function(element) {
element.parentNode.removeChild(element)
})
Demo: http://jsfiddle.net/93D3h/15/
Or use jQuery: $('[disabled]').remove()
Update:
Based on the comments and the new requirements, I made a small toggle demo here using data attributes instead: http://jsfiddle.net/95Ed5/
try this code
.hidden {
visibility: hidden;
}
Designed to display or hide the element, including a frame around it and background. When you hide an element, although it is not displayed at a place that takes the element remains on him. If the intended output of different elements in the same place on the screen to bypass this feature should use absolute positioning, or use the property display.
Your best shot (cross browser solution) would be to use jquery to store the hidden values. It can be done it regular javascript too.
var array = $(".hidden");
$(".hidden").remove();
And then when you need them you get them in array
Update
Here is the updated fiddle : http://jsfiddle.net/93D3h/16/
I added two buttons to show what you could do with the stored hidden values (add them back to the select, or remove them)
Here is an example I have put on jsfiddle
<div style='width:30px;border:solid 1px'>
<select style='width:100%'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/>
<br/>
<div style='width:300px;border:solid 1px'>
<select style='width:100%'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
In every browsers (FF,Chrome,Safari,IE9,IE9 in IE8 mode) other than IE 7/8, the options of the first combo are fully visible. IE8 is limiting the width of the options to the width of the outer div.
Here is a
Any idea how to fix that?
Adding overflow: hidden; to the div's style and width: auto; float: right; to the <select> seems to work for me.
<div style='width:30px;border:solid 1px; overflow: hidden'>
<select style='width:auto; float: right;'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
See working example at http://jsfiddle.net/J7sYq/10/
Sadly there is no css solution for this as it relates to the elements behaviour.
As such I will direct you to another source.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
This changes the width of the element when it is focused on and sets it back when it loses focus. Not very elegant but still allows the whole option to be seen.
Hope this helps.
I know there are already a whole bunch of answers here. But none of the workarounds really suits my requirement when I met the same problem: I need to put the select inside a fixed width div. Beyond the width, it will be hidden and I don't want to see this - it's pure ugly. The first time I saw this link, I though I finally found what I want. But after playing with the demo, I was disappointed. The CSS tricks works a bit but it will change the width in whole not just the drop down list. What I need is a really nice looking select just as it should look on other browsers than IE.
I finally worked it out myself using javascript and css plus some ie version specific check. This is a summary of what I did:
Use a transparent div the same size as the select to cover the select. Now we can still see the item under the div but we cannot click on it.
The transparent div now intercept the mouse click and populate an unordered list with the items from the select. Then we show the list right under the original select. It looks exactly like a clicked select on other browsers.
When an item is selected in the unordered list, the list will be hidden and the corresponding item in the original select will be selected.
This approach requires more code, but it really simulate the "right" behavior of the select. The unordered list is styled with css, making it easier to change the look. It is tested under ie7-8.
Following is a screenshot from a working project viewed in ie 8:
Don't know of any solution (this is IE fancy world). Maybe a different widget for IE8 or less (extjs combo, jquery ui combo or some pop menu library).
This is what works for me:
<div style='max-width:300px;min-width:300px;border:solid 1px'>
<select style='width:300px'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/><br/>
use * before your css property for ie specific css.
When marked with * only ie8 can understand
p.myclass {
width: 30px;
*width: 300px;
}/* Just an example*/
The ie8 browser will take its own property what you specify and use that. By this you can alert your site specific to ie8, but your property with * should come after the default property. see the code
You have specified width to the outer div consisting the select box. And it looks the same for me in all browsers.
If you want it to stretch based on the length of the options in the select box, then simply just don't specify any width or just say width:auto.
Check this http://jsfiddle.net/J7sYq/3/
I am having problem with my html drop down select box. I have long list of items in select box therefore it goes outside of my screen. it doesn't shows scroll bar. Please help
Try forcing the size:
<select ... size="1">
Could you post the HTML and any css that styles the select? Inspect the select element in Firebug and see what the overflow attribute is set that (it should default to auto and create the scrollbar if necessary).
<select id="#long-select>
<option ...>...</option>
<option ...>...</option>
...
</select>
Then the correspond CSS:
#long-select { overflow: auto; }
Try opening your page in IE, should show all elements.
I think it is a bug in Firefox, that the list element is always aligned to the select field. IE does not show the list outside of the screen.