How to stop combo list from compressing multiple spaces in value

Webix JS
#1

For formatting and appearance to the user in a combo view, I have data coming back of the form:

[{
    id: 1,
    value: "Category"
 },
 {
    id: 2,
    value: "Other Category [8 spaces here but even this control destroys them] . . DEPRECATED .."
 }
 {
    id: 3,
    value: "Last Category"
 }]

Where a label is being dynamically inserted with extra spacing to have it both more visible and to communicate that the label is NOT part of the category name. Regardless of where there are multiple space, even between words in the main category name, they get compressed down into one space. Why? And how can this be turned off?

#2

Hello,

Actually, the issue is not related to Webix, but it is a part of HTML specification.

So, you can use either solution to overcome it:

  •   in the option text combined with a template to replace the symbols in the Combo input.
  • pre tag in the option text with extra CSS to avoid the default styling of “pre” elements.

https://snippet.webix.com/xlizcsiw

#3

Ah. Missed that. Thank you for the clarification and reference, as well as solution.

#4

That most definitely shows my desktop roots, rather than web application. :slight_smile:

#5

So why is an ascii icon having the same problem?

https://snippet.webix.com/uzzixyte

#6

Most probably such characters are not allowed as a dynamic input value.

But you can use the Richselect widget to visualize the icon in the text field. Richselect is not editable and, hence, its input area is based on a DIV element: Code Snippet

#7

Good point. Thanks.