CODEWITHSUNDEEP
javascripthtmlcss
Skizit
Skizit

Reputation: 44852

Set max width of Select when it expands?

I've got the following...

http://jsfiddle.net/WvgSw/7/

I'd like to set the max width so that when it is expands (when you click it) rather than the menu growing to larger than 180px it remains a max of 180px and the text simply cuts off. How would I achieve this?

NOTE: I would prefer the markup in Javascript, not CSS. I am aware of max-width in CSS.

Upvotes: 3

Views: 13179

Answers (3)

Shivkant
Shivkant

Reputation: 4619

Check the following code:

Page

    <select id='select' style='max-width:180px;'>
  <option class="maxwidth" value="volvo">Volvo</option>
  <option class="maxwidth" value="saab">Saab</option>
  <option class="maxwidth" value="mercedes">Mercedes</option>
  <option class="maxwidth" value="LARGER THAN 180PX  TEST TEST TEST TEST">LARGER THAN 180PX  TEST TEST TEST TE</option>
</select>

CSS

.maxwidth
{
    max-width:100px;
}

I have updated the code on the link you have provided.

http://jsfiddle.net/WvgSw/347/

Note: please mark the correct answer and Vote For it.

Upvotes: 2

anothershrubery
anothershrubery

Reputation: 21003

As far as I know you cannot limit the width of the drop down of a regular select control. You will need to use custom controls, either built by yourself or using other packages.

DevExpress, and probably the likes of Infragistics, provides this functionality.

Upvotes: 0

Amrish
Amrish

Reputation: 697

Try setting the width of the select box to auto

menu.style.width = "auto";

This way it wont expand when you click it, but it wont cut off the largest entry.

~Amrish

Upvotes: -1

Related Questions