I'm looking to create a drop-down menu with rather long option titles. The problem is that I want to restrict the boxes size otherwise the size changes to the length of the longest entry. When I use the length attribute, it forces the drop-down to be a certain length, but it also cuts the sentences in half when I drop the options due to the option box being the same length as what I set the drop-down menu's length to be.

Is there any way to set the drop-down menu's size, but have a different size on the option menu that is displayed when the drop-down menu is clicked?



You can try this:

onload = function(){
	var s = document.getElementById('mySel');
	s.onchange = s.onblur = function(){ this.style.width = '150px'; };
	s.onmouseover = function(){ this.style.width = '310px'; };
<select id="mySel" style="width:150px;">
<option>Option a</option>
<option>Option b</option>
<option>Option c</option>
<option>Option d</option>
<option>Option e</option>
<option>Option f</option>
<option>Option g</option>
<option>Option h Option h Option h Option h Option h</option>

It's reasonable but less than perfect if you click and release without making a selection. I tried mouseout but that made it impossible to make a selection with the mouse.

You also need to be aware that by resizing in this way, it will cause the document to reflow.

There's probably a better way of doing this (probably a Jquery, Prototype or Yahoo lib gadget). Maybe someone else will post.


... after a little more play, I came up with this which is a lot better behaved:

onload = function(){
	var s = document.getElementById('mySel');
	s.onmouseover = function(){
		this.style.width = '310px';
		this.onmouseout = this.onchange;
	s.onclick = function(){ this.onmouseout = null; };
	s.onchange = s.onblur = function(){ this.style.width = '150px'; };


Thanks Airshow,

Is it not possible to change only the size of the list that drops down to be the size of the largest option?

Thanks again.


Not as far as I'm, aware. It's all or nothing with standard HTML/CSS.

However, these days there are many gadgets and widgets available in JavaScript libs - eg. Jquery, Prototype, !Yahoo UI lib. Also in derivative libs such as script.aculo.us (based on Prototype).

I don't have an encyclopedic knowledge of these libs but feel sure you might find what you are looking for if you dig. Maybe Google for a good "review of JS libs".

Good luck.