CODEWITHSUNDEEP
cssselect
GSto
GSto

Reputation: 42350

Limit Initial width of select list

I have a select list, where some clients have entered insanely long options for them, which breaks the design. I'm wondering if there is a way to set a fixed width on the select widget, but still have the drop down menu it produces still be wide enough to display all of the option.

Upvotes: 8

Views: 16706

Answers (6)

Jongosi
Jongosi

Reputation: 2355

Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+

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

Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).

Upvotes: 5

David
David

Reputation: 11

Add to the CSS something like this:

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. Note there are no dots in front of the anchors.

Upvotes: 1

Nivas
Nivas

Reputation: 18334

If the list you have (the entries in <select>) are user entered, and the user can enter, say 500 characters, they they definiteky will.

In this case, I would not go for a <select> list, but a custom list built with, say a <div>.

This is not difficult, all you need is

a div that contains the default option,
a hidden div with all the options
When the user clicks the default option show the hidden div
On click of the items in the hidden div (that is now visible) make that the selected item in the first div

Perhaps there already jquery plugin for this. but i am not sure whether you are open to jquery, I am not a jquery expert anyway.

I know this comparitively more effort than having a select, but i think it is worth the effort. All the hacks - expand the div onmouseover, onclick etc do not look great, might still break your design, and depending on the amount of data the user can enter, would still not be effective.

In the custom list approach, you can wrap the elements, so that you are in complete control.

Upvotes: 1

timothyclifford
timothyclifford

Reputation: 6959

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

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

Is a bit choppy but looks better than cutting off the content

Upvotes: 0

CristiC
CristiC

Reputation: 22698

I don't know if you can do it with css (browser independent), but here are 2 other solutions:

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

2. Build your select using divs and lists so when it is closed to have a specific width and when you press something like an arrow to display full width. (I am not sure you understand what I'm trying to say with this one....).

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382716

See the working example here.

You just need to apply width to your select box either inline or CSS. It will be as wide as you have specified but when clicked, it will show all options with whatever width.

Upvotes: 2

Related Questions