Preventing whitespace from collapsing in dhtmlxcombo

I created this topic because I figured out the answer to this question, and wanted to share.

I was having the problem where the dhtmlxcombo box was collapsing the white space (which I did not want) on the options I was inserting into the box. So when I called the getComboText() method, I would get my selected option stripped of whitespace.

The reason I found for this was an artifact of HTML (and perhaps IE too), where I discovered that in the render() function in dhtmlxcombo.js, the “innerHTML” of the option was being set with the text of my option. The “this.text” value is actually what I want (with whitespace preserved), but once it goes into the innerHTML the whitespace is stripped under the hood by the HTML display of the browser.

this.content.innerHTML=this.text;
this._ctext=_isIE?this.content.innerText:this.content.textContent;

Also seen above is the “this._ctext” method is being set to the “innerText” value of the option, which is basically just the innerHTML stripped of any HTML tags. The “this._ctext” is actually what gets displayed in the combobox once an option is selected, and thus when the getComboText() function is called.

So just change the line

this._ctext=_isIE?this.content.innerText:this.content.textContent;

to

this._ctext=this.text;

and you’ll see the text displayed in the combobox with whitespace preserved. NOTE though that the options displayed in the dropdown list will still have whitespace stripped, so if you care about that, you’ll need another solution.

Hello,

Thank you for sharing your solution.

I just want to add one remark: I would not recommend this solution if your combo contain html tags in their options (_ctext is displayed in header input and you will see innerHTML instead of plain text after an option is selected).