Limit Initial selection list width

Question

I have a pick list where some customers have introduced an insanely long option for them, which violates the design. I am wondering if there is a way to set a fixed width in the selection widgets, but still there is a drop-down menu that it creates is still wide enough to display the entire option.

Answer 1

Not sure if you're generally open to using jQuery, but I usually use this method:

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

A bit volatile, but looks better than clipping content.

Answer 2

Since you do not specify which browser support you need, this may or may not be a solution. This works on most IE9 + browsers.

select { width: 100%; max-width: 150px; } 

Short and sweet. With the extension, select display all the text (if it does not exceed the viewing area!).

Answer 3

See a working example here.

You just need to apply width to your selection field, either inline or CSS. It will be as wide as you indicated, but when you click on it, all parameters with any width will be displayed.

Answer 4

I don't know if you can do this with css (regardless of browser), but there are two more solutions here:

1. Instead of displaying "veeeeery looooooooooong teeeeeeeeext", you can display something like "veeeeery loooo ...";

2. Create your choice using divs and lists, so when it's closed to have a specific width, and when you click on something like an arrow to display the full width. (I'm not sure that you understand what I'm trying to say with this ...).

Answer 5

If the list that you have (entries in <select> ) is entered by the user and the user can enter 500 characters, they will be defined.

In this case, I would not go to the <select> list, but create my own list, for example, <div> .

It’s not difficult, all you need is

div containing the default option,
hidden div with all parameters
When the user clicks the default button, display a hidden div
When you click elements in a hidden div (which is now visible), make the selected element in the first div

Perhaps there is already a jquery plugin for this. but I'm not sure that you are open to jquery, but I am not a jQuery expert.

I know this comparatively greater effort than having select , but I think it's worth the effort. All hacks - expand the div onmouseover, onclick, etc., do not look great, it can still break your design, and depending on the amount of data that the user can enter, it still will not be effective.

In the custom list approach, you can wrap items so that you have full control.

Answer 6

Add something like this to the CSS:

 select { border: 1px solid #838383; border-style: outset; font-weight: bold; color: #3F3F3F; max-width: 150px !important; overflow: hidden; } option { max-width: 120px !important; overflow: hidden; } 

This works for me. Please note that there are no dots in front of the anchors.