1

I want to limit the width of menu items shown in a drop down. For instance, In this demo link http://jsfiddle.net/B3uSD/1690/ , the width of the select box is 150px. Yet, when i click the arrow, the menu items are displayed beyond 150 px because of just one item "This is my very long string".

How can i limit the menu items to fit within 150 px?

Edit: Below is what is shown currently. Notice how the options box slip beyond the width of select box. "This is my very long string" is displayed fully but the options box expands beyond the drop down select box. enter image description here

What I require is something like below enter image description here

Notice that, although the text is truncated, the options box is still aligned with the combo box

Community
  • 1
  • 1
mhn
  • 2,660
  • 5
  • 31
  • 51

2 Answers2

0

This website has various different methods to solve your problem Controlling the width of SELECT lists

I think I found somewhat similar problem on stackoverflow itself. Use of css should resolve your problem How can change width of dropdown list?

Community
  • 1
  • 1
Bibek Aryal
  • 545
  • 9
  • 28
  • 1
    Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. – Paulie_D Mar 11 '15 at 11:13
  • Thank your for your sugggestions – Bibek Aryal Mar 11 '15 at 11:16
0

try this code Its working fine.

HTML:-

  <select name="wgtmsr" id="wgtmsr">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
 </select>

CSS:-

       #wgtmsr{
       width:150px;   
        }

       #wgtmsr option{
         width:100px;   
         }

Check JSFiddle Demo

Hardeep Randhawa
  • 47
  • 8
  • when i put a long string in that fiddle demo, the options box takes the width of the long string. but i require it to be fixed – mhn Mar 11 '15 at 11:54
  • you cant do this with a standard – Hardeep Randhawa Mar 11 '15 at 12:12
  • I found some sample in GitHub[github.com/fnagel/jquery-ui/wiki/Selectmenu](https://github.com/fnagel/jquery-ui/wiki/Selectmenu) – Hardeep Randhawa Mar 11 '15 at 12:16