Different select box size depending on focus

Romanichine · Apr 16, 2002

Hi,

It is possible to have the select boxes a certain size,
but its 'scrolling list bigger'?

e.g.
xxxxxxxxxx <-- select box with the down arrows
xxxxxxxxxxxxxxxx <-- first line of scrolling
xxxxxxxxxxxxxxxx <-- 2nd line of scrolling
xxxxxxxxxxxxxxxx <-- 3rd etc...

This would be to prevent a select box to grow larger
than you want and destroy the design of the page. But
the scrolling list could get over the rest of the page
(as it works right up/down anyway).

Thanks,
--
Roman.

xso · Apr 16, 2002

Hi Roman,

I know a way of doing it but it depends on what browsers you focus on. If you are lucky enough to develop an intranet for a company where they use a mozilla-based browser (Netscape 6 or Mozilla), then you can use the following piece of code:

<form>
<select style="width: 100px;">
<option>Test</option>
<option>Test Tesr Testr test terstr tryuflhghgkghhghg</option>
</select>
</form>

However, this will not work with:
1. Netscape 4 (the box is still as wide as the content pf the option tag);
2. IE5 and IE6 (the option tag is cuted after the amount of pixels you defined in the style attribute!);

I will try to find a work-around for IE and will post back if I find something.

Cheers,

xso

Boomerang · Apr 16, 2002

Hi Roman,

Try this:

<script language="javascript">
function changeWidth()
{
document.MyForm.selectboxname.style.width = 300;
}

function resetWidth()
{
document.MyForm.selectboxname.style.width = 105;
}
</script>

<form name="MyForm">
<SELECT style="width:105px" onmousedown="changeWidth()" onchange="resetWidth()" name="selectboxname" SIZE="1">
<OPTION value="none" selected>-Select Here-</OPTION>
<OPTION VALUE="

http://www.google.com">Google</OPTION>

<OPTION VALUE="

http://www.yahoo.com">Yahoo</OPTION>

</SELECT><br><br>
<input type="submit" value="go for it" name="submit1" ONCLICK="javascript

penWindow(document.MyForm.selectboxname.options[document.MyForm.selectboxname.selectedIndex].value);">
</form>

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (

http://www.boomerang2002.com)

!! Many Happy Returns !! -->

xso · Apr 17, 2002

Hi Boomerang,

I had tried the same. It looks perfect with Internet Explorer but does not really work with NS6 or Mozilla. So I would add a browser check:

<html>
<head>
<script language="javascript">

function changeWidth()
{
if(navigator.appName=="Microsoft Internet Explorer&quot

{document.MyForm.selectboxname.6style.width = 300;}
}

function resetWidth()
{
if(navigator.appName=="Microsoft Internet Explorer&quot

{document.MyForm.selectboxname.style.width = 105;}
}
</script>
</head>
<body>
<form name="MyForm">
<SELECT style="width:105px" onmousedown="changeWidth()" onchange="resetWidth()" name="selectboxname" SIZE="1">
<OPTION value="none" selected>-Select Here-</OPTION>
<OPTION VALUE="

http://www.google.com";>Google</OPTION>

<OPTION VALUE="

http://www.yahoo.com";>Yahoo</OPTION>

</SELECT><br><br>
<input type="submit" value="go for it" name="submit1"

ONCLICK="javascript

penWindow(document.MyForm.selectboxname.options[document.MyForm.selectboxname.selectedIndex].va

lue);">
</form>
</body>
</html>

This code works fine in NS6, IE5, IE6 and Mozilla.
I hope this helps.

Cheers,

xso

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Different select box size depending on focus

Romanichine

Programmer

xso

Programmer

Boomerang

Programmer

xso

Programmer

Similar threads

Part and Inventory Search

Sponsor