Mark missing spaces to display columns in a fixed width <select>

Question

I am trying to create a column effect in a drop-down list by filling the text with a space, as in this example:

<select style="font-family: courier;"> <option value="1">[Aux1+1] [*] [Aux1+1] [@Tn=PP] </option> <option value="2">[Main] [*] [Main Apples Oranges] [@Fu=$p] </option> <option value="3">[Main] [*] [Next NP] [@Fu=n] </option> <option value="4">[Main] [Dr] [Main] [@Ty=$p] </option> </select> 

According to this blog , perhaps.

The problem is that the space is compressed so that columsn do not line up. SAme leads to FF, IE6 and Chrome.

What am I missing?

Answer 1

You need to use   instead of the usual spaces.

For example, you would do this with your option:

 <option value="2">[Main]&nbsp;&nbsp;&nbsp;[*]&nbsp;&nbsp;[Main Apples Oranges]&nbsp;[@Fu=$p] </option> 

Answer 2

Extending patmortech's answer to rendering ListItem in asp.net with   instead of  

 //Pad the columns string spaceDecode = Server.HtmlDecode("&nbsp;"); for (int i = 0; i < ddl.Items.Count; i++) { ListItem item = ddl.Items[i]; item.Text = item .Text.Replace(" ", spaceDecode); } 

Answer 3

White space in HTML is reduced by default. Use CSS to select a monospaced font (as in the example you are attached to), and white space styles as preformatted.

 option { font-family: monospace; white-space: pre; }