473,408 Members | 2,813 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,408 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 1894
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: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
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
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
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
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

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.