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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Reinhold Schrecker
    #1

    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:

    myCurrentElemen t =
    window.document .getElementsByN ame('par_role')[0];
    for (var i = 0; i < optionArray.len gth; i++)
    {
    myNewElement =
    window.document .createElement( 'option');
    myNewElement.se tAttribute('val ue',
    optionArray[i]["value"]);
    if (optionArray[i]["selected"]==1)
    {
    myNewElement.se tAttribute('sel ected',
    'selected');
    }
    myNewText =
    window.document .createTextNode (optionArray[i]["label"]);
    myNewElement.ap pendChild(myNew Text);
    myCurrentElemen t.appendChild(m yNewElement);
    }

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

    var j = optionArray.len gth;
    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

    Tags: None
    • ivan.pavlov@gmail.com
      #2
      Re: Pulldown-menu created with JavaScript/DOM; Wrong width in IE

      Reinhold Schrecker wrote:[color=blue]
      > 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[/color]

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


        Comment

        • Richard Cornford
          #3
          Re: Pulldown-menu created with JavaScript/DOM; Wrong width in IE

          Reinhold Schrecker wrote:[color=blue]
          > 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:
          >
          > myCurrentElemen t =
          > window.document .getElementsByN ame('par_role')[0];
          > for (var i = 0; i < optionArray.len gth; i++)[/color]
          <snip>[color=blue]
          > 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?[/color]

          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="fillSel ect();">

          <script type="text/javascript">
          function fillSelect(){
          var sel, el, op = optionArray;
          if((window.Opti on)&&(document. getElementsByNa me)){
          if((el = document.getEle mentsByName('pa r_role')[0])){
          el.options.leng th = 0;
          for(var c = 0;c < optionArray.len gth;++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.


            Comment

            Previous template Next
            Working...