Dynamic Width Change of Listbox/Combobox

**Zman771** · 05-08-2006, 05:05 PM

Does anyone know of any javascript code that will allow you to dyamically change the width of a listbox/combobox? I'm really looking for something that will allow me to use the mouse to resize the combobox (i.e. drag the width). Thanks.

**jscheuer1** · 05-09-2006, 08:47 AM

Using this library:

http://www.walterzorn.com/scripts/wz_dragdrop.zip

from:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

With this markup:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<form action="">
<div id="name2" style="width:75px;height:75px;position:absolute;border:7px solid green;"><select  style="width:100%;height:100%;" size="2" name="bob">
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
<option value="ed">Hey</option>
</select></div>
</form>
<script type="text/javascript">
<!--

SET_DHTML("name2"+RESIZABLE+HORIZONTAL+VERTICAL);

//-->
</script>
</body>
</html>

Works fairly well, you need to hit shift, then left click on the border to resize it.

**Zman771** · 05-09-2006, 07:32 PM

This is great except that it is not a combobox/dropdown box. How do I fix this?
thanks.

**jscheuer1** · 05-09-2006, 08:28 PM

What is a combobox/dropdown box? I thought it was a select, so that is what I used. Perhaps you want a different sort of select type, you can remove the size attribute, that will make it more of a drop down but, makes resizing it in the vertical dimension rather pointless. Let me know more specifically and I will see about adapting it.

**Zman771** · 05-10-2006, 03:10 PM

The size fix worked. Thanks.
Is there any way to disable the vertical size chage? Also, can the behavior be changed so that you don't have to hold the shift key to resize?

**jscheuer1** · 05-10-2006, 06:46 PM

To limit the vertical resizing use something like so:

Code:

SET_DHTML("name2"+RESIZABLE+HORIZONTAL+VERTICAL+MAXHEIGHT+30+MINHEIGHT+30);

for your call, 30 is the number of pixels. At the same time, set the height of the container division at or slightly below this amount:

Code:

<div id="name2" style="width:75px;height:30px;position:absolute;border:7px solid green;">

To eliminate the need for the ctrl or shift keys, edit the external script file. Find this line:

Code:

	this.modifKey = this.e.modifiers? this.e.modifiers&Event.SHIFT_MASK : (this.e.shiftKey || false);

Change it to:

Code:

	this.modifKey = true //this.e.modifiers? this.e.modifiers&Event.SHIFT_MASK : (this.e.shiftKey || false);

Thread: Dynamic Width Change of Listbox/Combobox

Thread Tools

Search Thread

Dynamic Width Change of Listbox/Combobox

Bookmarks

Bookmarks

Posting Permissions