html select dropdrown width is too big

Question

I searched for a fix for my problem but I can't find one, maybe I don't know how to search this in english since it's not my first language.

Anyway, my problem is that I am trying to use the feature from HTML and one of the options is very loooong and if I leave the without any width passed as style it will destroy the entire website. If I use width it will only show something from the and look as cut. However I saw an example that had "..." in it which I gladly use but I don't know how.

Just to be clear, I am looking for some help to make my look like "Long option ..." or If anyone knows a better way?

Answer 1

Sample HTML:

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

Sample CSS:

select{
    width: 100px;
    text-overflow: ellipsis;
}

DEMO - Adding ... to selected value only

Change the width to what ever fits your situation best. Applying text-overflow: ellipsis adds the ... to the text which is longer than the specified width.

This style is only applied to the selected value but still displays the options in full when the dropdown is clicked.

Answer 2

If you're looking for a very simple solution like the one you described (appending ...) then something like this should work for you:-

$(document).ready(function() {
    var maxLength = 15;
    $('#example > option').text(function(i, text) {
        if (text.length > maxLength) {
            return text.substr(0, maxLength) + '...';
        }
    });
});

This simply loops over each option and checks its texts length. If it is greater than maxLength it will be shortended to the same length as maxLength and ... will be appended to it.

Here's some example markup to go with it:-

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

Here's a fiddle

Answer 3

You could solve this using jQuery and reading this article .

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });

Answer 4

If you set width on the select element, e.g.

select { width: 7em }

the dropdown list will still appear in its natural width.

If some option is very long, then you have a usability problem anyway and you should consider making it shorter or using different controls, like a set of radio button or checkboxes.