15

My problem comes from HTML dropdown select not able to preserve multiple consecutive whitespaces in its options. Here is a sample testcase and outcome.

The "white-space:pre" class CSS seems to work only for any HTML element except the select element options. Is there any literature or cases identifying such issue?

print "<style>.keepwhitespace { white-space: pre }</style>
<p class='keepwhitespace'>abc   def</p>
abc   def
<br/>
<br/>select and options with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'>
<option class='keepwhitespace'>Any </option>
<option class='keepwhitespace'>abc   def </option>
<option class='keepwhitespace'> Any  </option>
<option class='keepwhitespace'>abc def </option>
</select>
<br/>select with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'>
<option >Any </option>
<option >abc   def </option>
<option> Any  </option>
<option>abc def </option>
</select>
<br/>options with keepwhitespace
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\">
<option class='keepwhitespace'>Any </option>
<option class='keepwhitespace'>abc   def </option>
<option class='keepwhitespace'> Any  </option>
<option class='keepwhitespace'>abc def </option>
</select>";

Outcome looks like this:

preloaded As can be seen in the "p" element tag (and any other that I tried using, worked well formatting text with the "whitespace" CSS style. Yet the select does not.

As can be seen in the "p" element tag (and any other that I tried using, worked well formatting text with the "whitespace" CSS style. Yet the select does not.

on selection to view the item value string and length of string (the length SHOULD have been 10 instead of 7, 'abc def' is 8 chars in length)

on selection to view the item value string and length of string (the length SHOULD have been 10 instead of 7, 'abc def' is 8 chars in length)

halfer
  • 19,824
  • 17
  • 99
  • 186
luhfluh
  • 487
  • 2
  • 8
  • 26

2 Answers2

17

Form inputs usually map to their relevant native OS controls so they can be hard to style. The usual workaround to keep whitespace from collapsing into 1 space in <option>s is to use &nbsp; instead of usual spaces.

eg. one of your options would be:

<option>&nbsp;Any&nbsp;&nbsp;</option>

For more custom appearance, you would hide the real select element completely and replace it with custom markup and javascript.

Teoulas
  • 2,943
  • 22
  • 27
  • thanks @Teoulas, got insight with your suggestion. I replaced all whitespace ' ' with ' ' using the str_replace `$str1 = str_replace(" ", " ",$str1); .....` for every option value. Kinda sucks how such issues are not at least documented ...took a while to find your suggestion ;)! thanks again – luhfluh Jul 02 '12 at 13:06
  • 1
    One thing to be careful of with this solution is that because it is a non-breaking space, it won't break. That means that any long text you do this with will stay on a single line. If you know the text you are modifying is short, then this solution works great. It didn't work in my case with user input that is very often quite long. – Colin Nov 10 '15 at 00:11
1

The accepted answer is correct when dynamically creating the SELECT list from a server-side language. However, if you would like to create the options list in Javascript using the document.createElement function (probably the safest way to do so when using input you can't always completely control) then you can use the following method:

var someSelectElement = document.getElementById("id_of_select_element");
var optionSt = "Some spaces     go here.";
var tObj = document.createElement("OPTION");

tObj.value = 1; // whatever value you need.
tObj.title = "Whatever title you want to appear when hovering over the option";

tObj.text = decodeURI(optionSt.replace(/ /g, "%C2%A0")); // decodeURI is the key here.

// Then add it to an already existing HTML select element...
someSelectElement.appendChild(tObj);
Matt B.
  • 71
  • 4