Force blank spaces in dynamically generated OPTIONS for a SELECT tag

dmcguire111
dmcguire111 used Ask the Experts™
on
I am attempting to add options dynamically to a SELECT field.  It works except that I need to indent the text. If I just add blank spaces at the front of the text, then IE 5.5 has no problems, but NS 7.0 trims the whitespace.  If I use ' ' instead of spaces, then both IE and NS display   as part of the text instead of interpreting it correctly.  Now this is only with a dynamic generation of the option entry.  If I hand-code this in HTML, the   is correctly interpreted by both IE and NS and the indentation works perfectly.  Have you ever run into this and if so, do you have a solution?

Here is some sample code, so you can see what I am talking about.

Hand-coding example (the first option will be indented and the 2nd option is not indented -- both IE 5.5+ and NS 7.0 act the same). So it obvious that the whitespace is being trimmed from this example, but the   is respected.
            <select name="AllScreens" id="AllScreens" size="10" ondblclick="expandOrContractMenu();">
                    <option>&nbsp;&nbsp;Should have 2 spaces in front of this text</option>
                    <option>    Should have 4 spaces in front of this text</option>
            </select>

Dynamically adding to the above select tag example follows. Assume that label and value vars below have already been calculated.  It does not matter if indent uses spaces or &nbsp;.  I can't get NS to respect the indentation. (Remember that following works with IE, but if I use &nbsp; then IE displays &nbsp; as a part of the text, unlike the hand-coded example above).

    indent = '  ';
    for (ii = 1; ii < splitArray.length; ii++) indent += '  ';
    var menuOption = new Option (indent+label, value, false, false);

Any ideas?

Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Finance Systems Developer
Commented:
A bit annoying but after creating each option adjust using innerHTML:
menuOption.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"+label;

Obviously change my code so you can control your indentations as you wish.
Why

Commented:
why dont you paste the "&nbsp;" string on the dynamic part , so when you receive the string in javascript that contains the white space

Author

Commented:
ahosang - Thanks! Your suggestion works for NS. Since IE works with regular blank spaces, I now have a solution for both browsers I am trying to support.

evedder - I am sorry but I did not understand your answer.  I tried '&nbsp;' as part of the label directly, but it did not have the desired effect.  Both IE and NS prefixed my desired string with &nbsp so the text appeared as "&nbsp;My desired text" instead of substituting the &nbsp; with a blank space.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial