HTML Drop-Down Menus

Hi,

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?

Thanks!
-Ashton

[Airshow]

AH,

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>
</select>

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.

Airshow

[Airshow]

... 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'; };
}

Airshow

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.

[Airshow]

AH,

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.

Airshow