Pulldown-menu created with JavaScript/DOM; Wrong width in IE

Guest · Jun 8, 2006

Hi,

I am trying to generate a pulldown-menu with JavaScript/DOM:
The following Code works fine with Opera an Mozilla but in the IE the
width of the select element is too short:

myCurrentElement =
window.document.getElementsByName('par_role')[0];
for (var i = 0; i < optionArray.length; i++)
{
myNewElement =
window.document.createElement('option');
myNewElement.setAttribute('value',
optionArray["value"]);
if (optionArray["selected"]==1)
{
myNewElement.setAttribute('selected',
'selected');
}
myNewText =
window.document.createTextNode(optionArray["label"]);
myNewElement.appendChild(myNewText);
myCurrentElement.appendChild(myNewElement);
}

<select size="1" name="par_role"">
<script language="JavaScript">

</script>

If I try to set the width of the select-element with css, long labels
are cut off.
Do I have any other possibility to reset the width of the select
element?

Regards

ivan.pavlov · Jun 8, 2006

> If I try to set the width of the select-element with css, long labels
are cut off.
Do I have any other possibility to reset the width of the select
element?

Regards

Styling select boxes with css is almost impossible because different
browsers have different rendering. I advice you to try this approach -
http://icant.co.uk/forreview/tamingselect/

Richard Cornford · Jun 8, 2006

> I am trying to generate a pulldown-menu with
JavaScript/DOM: The following Code works fine with
Opera an Mozilla but in the IE the width of the select
element is too short:

myCurrentElement =
window.document.getElementsByName('par_role')[0];
for (var i = 0; i < optionArray.length; i++)

> optionArray[j]["label"] = "TEST";
// -->
</script>

If I try to set the width of the select-element with css,
long labels are cut off.
Do I have any other possibility to reset the width of
the select element?

You are suffering form all that needless complexity in your code.
Abandon DOM for this and do it the traditional way. It will work
reliably and the elements will be the desired size without styling:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body onload="fillSelect();">

<script type="text/javascript">
function fillSelect(){
var sel, el, op = optionArray;
if((window.Option)&&(document.getElementsByName)){
if((el = document.getElementsByName('par_role')[0])){
el.options.length = 0;
for(var c = 0;c < optionArray.length;++c){
sel = Boolean(op[c].selected);
el.options[c] = new Option(op[c].label, op[c].value, sel, sel);
}
}
}
}
</script>
<script type="text/javascript">
var optionArray = [
{
value:1,
label:"Admin"
},
{
value:4,
selected:1,
label:"TEST"
}
];
</script>

<select size="1" name="par_role"><option>Non-viable web page</select>
</body>
</html>

Richard.

Opera - Problem determening the selectedIndex via JavaScript/DOM	2	Jun 7, 2006
Javascript DOM	1	Mar 29, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Multi select options in a menu	1	Oct 30, 2022
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
JavaScript/DOM: Can't set onclick-attribute for <a>'-tags in IE	3	May 22, 2006
Needing Help With My First JavaScript script	1	Mar 22, 2018
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

Pulldown-menu created with JavaScript/DOM; Wrong width in IE

Guest

ivan.pavlov

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads