Preserving white space in an HTML select option

Question

I have a set of html text boxes that take input and when the user clicks an 'add' button uses javascript to take the text input and format a string that is put in an HTML select box. The first of these boxes is supposed to contain a 2 character number but can also accept a blank. The formatted strings would look like this:

01-ABC-O
02-DEF-I

However I need a way to display the blank numbers that lines up with the other elements

 -GHI-O

This type of entry will show up fine when the javascript adds the option, but when the page is reloaded and the select is repopulated with the values (I'm using Java, jsp, and struts 1.1 if that helps) it gets the same values(spaces preserved) but the whitespace is no longer shown in the select control (I've looked at the page source, and it looks identical to when the javascript adds the option). I have tried substituting the spaces for   but this just prints the string "&nbsp" instead of the space. I've also tried using "pre" html blocks and the css white-space property and neither have worked.

Let me know if any further clarification is needed.

Answer 1

You need to replace the spaces with   and it should work - note the closing semi-colon (which is missing from your example in the question)! When you do it through Javascript, most (all?) browsers will automatically render the spaces, but when the spaces are there when the page is loaded all (sometimes all but one) of them will be ignored.

You should also apply a font-family: CSS attribute to the select that specifies mono-spaced font(s) in order to ensure everything lines up properly.

Answer 2

When creating the select option with javascript, to preserve white-space, use "\xa0" - it is a NO-BREAK SPACE char.