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
Related
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).
Basic HTML Question: My text input field stretches across the entire webpage and I want to center it and make it look a bit more friendly.
I'm in Wordpress and am editing the HTML. Here is what I currently have:
<input name="FNAME" required="" type="text" placeholder="First Name" maxlength="5"/></p>
Is there a difference if I use maxlength=, maxlength:, maxlength:50px etc?
I know this is basic, but i've been playing around with this for a while now.
Thanks so much!
maxlength is an HTML input attribute which determines the maximum number of characters which can be entered into the input. maxlength=50 means that the user can't enter more than 50 characters.
What you want is CSS, which controls styling. The following would make the input 50% width of its containing element and center it within that element.
input {
display: block;
width: 50%;
margin: 0 auto;
}
max-width sets the maximum width that an element can ever be. It overrides width. It's especially useful in setting up responsive designs. In general though, if you merely want to set the width of an element, use width.
I have a form with 3 elements
<form>
<input type="search" value="long text" />
<select>
<option>Google</option>
<option>Bing</option>
</select>
<button>Search</button>
</form>
I would like to have the select and the button to have their own width, and the input to fill all the remaining space.
I found different solutions but they seems to not work properly.
Following how-to-make-element-fill-remaining-width-when-sibling-has-variable-width I get the desired effect (having to add markup and to change the order of the elements) but the input is overridden from the other elements, loosing its nice rounded borders.
button, select {
float: right;
}
input {
width: 100%;
}
.input_wrapper {
overflow: hidden
}
How can I do instead?
I need a cross-browser solution (>=IE7)
I would avoid (if possible) to use additional markup
I want to avoid that the the input could be overflown and hidden (as explained above).
PS - I usually try to avoid floats and stay with display-block. But all the suggestions are welcome
Ok, I think this can be done by setting the form to "display: table" and then the input, select and button to display: table-cell.
Then set widths on the first 2 elements and make the third element width: 100% and display: block.
Let me know how you get on.
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/
IE seems to ignore the height set in CSS when rendering a HTML SELECT. Are there any work around's for this or do we have to just accept IE will not look as good as other browsers?
There is no work-around for this aside from ditching the select element.
It is correct that there is no work-around for this aside from ditching the select element, but if you only need to show more items in your select list you can simply use the size attribute:
<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Doing this you'll have additional empty lines if your collection of items lenght is smaller than size value.
you can use a combination of font-size and line-height to force it to go larger, but obviously only in the situations where you need the font larger too
edit:
Example -> http://www.bse.co.nz EDIT: (this link is no longer relevant)
the select next to the big search box has the following css rules:
#navigation #search .locationDrop {
font-size:2em;
line-height:27px;
display:block;
float:left;
height:27px;
width:200px;
}
Yes, you can.
I was able to set the height of my SELECT to exactly what I wanted in IE8 and 9. The trick is to set the box-sizing property to content-box. Doing so will set the content area of the SELECT to the height, but keep in mind that margin, border and padding values will not be calculated in the width/height of the SELECT, so adjust those values accordingly.
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?
Use a UI library, like jquery or yui, that provides an alternative to the native SELECT element, typically as part of the implementation of a combo box.
Even though setting a CSS height value to the select element does not work, the padding attribute works alright. Setting a top and bottom padding will make your select element look taller.
Finally found in http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html
a simple solution (at least for IE8):
font-size: 1.0em;
BTW, for Google Chrome, found this workaround at
How to standardize the height of a select box between Chrome and Firefox? */
-webkit-appearance: menulist-button;
There is a work-around for this (at least for multi-select):
set select size attribute to option list size (use JavaScript or set it to any large enough number)
set select max-height instead of height attribute to desired height (tested on IE9)
You can use a replacement: jQuery Chosen. It looks pretty awesome.
select{
*zoom: 1.6;
*font-size: 9px;
}
If you change properties, size of select will change also in IE7.
See also inconsistent box model between input, select, ...
you could do similar to what facebook does, just add padding around. It is not as good as one could wish but looks reasonably well.
Not sure but I think this was a question not about the height of a 'multiple' type of select element but a drop-down type of select element. I have come across times when the drop-down looks squashed and does not show clearly the selected value. Undoubtedly it has to do with CSS style info in use on the page. The only way to stop it is either change the CSS (which would likely affect the whole page or parts of it in ways you don't want affected) or use style info in the select element itself to override the CSS that's clobbering it. Example:
<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>
Hope this helps.
i wanted to set the height of the select box to be smaller than the default. i used
select {
position: relative;
height: 10px !important;
display: inline-block;
}
this works on ie7 and ie8. you might only need the height property, i just added the position and display to override properties inherited from higher up the dom.