Resize select listbox

[GreGorGy]

Actually, I thought this would be easy. Alas!

I have the following HTML:

....
<STYLE TYPE="text/css" TITLE="text/css">
	select.selectClass
		{
		width: 140px;
		border: 1px solid gray;
		height: 200px;
		}
</STYLE>

....

<SELECT NAME="mySelect" ID="mySelect" CLASS="selectClass" SIZE=5>
	<OPTION>One
	<OPTION>Two
	<OPTION>Three
	<OPTION>Four
	<OPTION>Five
	<OPTION>Ten
	<OPTION>Twenty
</SELECT>

....
<SCRIPT TYPE="text/javascript" LANGUAGE=JAVASCRIPT CHARSET=UTF-8>
	document.getElementByID("mySelect").style.height = 20;
</SCRIPT>
....

No way in hell will the SELECT listbox change its height. Does anyone know if this can be done?

 

[Raithlin]

(CSS) Styles need to be assigned a measurement unit - ie. 20px, or 20pt, or 20em, etc. That might make all the difference. (Only 0 is unit-free)

<script type="text/javascript">
	document.getElementByID("mySelect").style.height = 20px;
</script>

 

[FarligOpptreden]

Interesting that you set a style for it AND do it in JavaScript... Any reason for that?

 

[Raithlin]

Interesting that you set a style for it AND do it in JavaScript... Any reason for that?

Methinks it's a proof of concept for what might become dynamic later?

 

[GreGorGy]

(CSS) Styles need to be assigned a measurement unit - ie. 20px, or 20pt, or 20em, etc. That might make all the difference. (Only 0 is unit-free)

<script type="text/javascript">
	document.getElementByID("mySelect").style.height = 20px;
</script>

Nope - no difference.

Style and JS - when JS alone was not working, I figured it wouldn't kill to set a value in CSS first. And yes, proof of concept for what has to become dynamic later.

 

[GreGorGy]

OK, it can be half-done using some hard thinking and mathematics and some rules and changes to the code:

(1) No height in your CSS - rather do the maths and figure out how many lines that height will produce.

select.selectClass
		{
		width: 140px;
		border: 1px solid gray;
		/* height: 200px; -- remove this */
		}

(2) Use that lines calculation as your size attribute in your SELECT:

<SELECT NAME="mySelect" ID="mySelect" CLASS="selectClass" SIZE=13>

Now, take note that we are no longer pixel accurate but least if we need a SELECT to fill a screen (iFrame in my case) as I did, this is as close as it comes

(3) The javascript changes slightly:

document.getElementByID("mySelect").size = 3;

size can go up or down. This is the only method I have found which works. Know of any others?