473,395 Members | 1,377 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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

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[i]["value"]);
if (optionArray[i]["selected"]==1)
{
myNewElement.setAttribute('selected',
'selected');
}
myNewText =
window.document.createTextNode(optionArray[i]["label"]);
myNewElement.appendChild(myNewText);
myCurrentElement.appendChild(myNewElement);
}

<select size="1" name="par_role"">
<script language="JavaScript">
<!-- //
var j = optionArray.length;
optionArray[j] = new Object();
optionArray[j]["value"] = "1";
optionArray[j]["label"] = "Admin";

var j = optionArray.length;
optionArray[j] = new Object();
optionArray[j]["value"] = "4";
optionArray[j]["selected"] = "1";
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?

Regards
Reinhold

Jun 8 '06 #1
2 1893
Reinhold Schrecker wrote:
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
Reinhold


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/

Jun 8 '06 #2
Reinhold Schrecker wrote:
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++) <snip> 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.
Jun 8 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: cgplays.com | last post by:
Are there any good places to look for asp.net modules for select pulldowns? There is a select pulldown on a site i do partial development on http://www.computergroupplays.com/fb-pres4.asp that has...
7
by: jason | last post by:
Is there a way - possibly a disconnected rs? - to update the contents of an existing pulldown on a page without having to re-submit the page for the user to see the pulldown populated with an...
3
by: Mark R | last post by:
I have one .asp page with a SELECT pulldown list on it and some INPUT fields. When SUBMIT is clicked the form data is submitted to that same page and validated. If INPUT fields are empty the asp...
2
by: Mike | last post by:
Hello, I'm looking for an example of doing a page with pulldown menus, where the user selects a choice from the first pulldown, then based on that input, another appears, then the user selects...
1
by: cgplays.com | last post by:
I have a select-pulldown at http://computergroupplays.com/fb-pres2.asp that changes the 3rd pulldown (Dbase) depending on what the user enters in the 2nd (Wk). My associate wants the values inside...
2
by: Oskar Wild | last post by:
Hello, how do I code it to display a select (pulldown) box only if the user has selected a certain option in another pulldown box? <select name=country> <OPTION value="France" SELECTED>France...
9
by: flarkblark | last post by:
I recently had the displeasure of looking at the code required to implement the pop-up menus used in a pulldown menu system for a webpage. The sheer amount of Javascript required was amazing...
4
by: Richard MSL | last post by:
I am making a combobox, where I add items to the combobox as they are required, as the user scrolls to the top or bottom of the list of items. It is a sorted combobox. Scrolling down works fine,...
20
by: Highlander | last post by:
Hello all. Consider the following HTA: <html> <head> <title>Date Pulldowns</title> <HTA:APPLICATION ID="HTAUI" APPLICATIONNAME="Date Pulldowns" SCROLL="no" SINGLEINSTANCE="yes"
0
by: =?Utf-8?B?U2FuZHkgUnlhbg==?= | last post by:
ok - i have a list box that is a pull down that is populated by a stored procedure - so it has data in it already. when a user types in Tr - the pulldown automatically goes to the section with Tr...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.