ComboBox and DropDownList Options all start with weird character.

[lee]

I've followed everything i can find about enforcing UTF-8 encoding, but this is still happening. It only happens in the drop down options of the aforementioned components, not after they are selected and not in the ASP.NET core <InputSelect> component.

 

 

[Dimo]

Hi Lee,

There is a zero-width space character in our theme, which can get corrupted and transformed during manual editing or copy-pasting of the CSS code. Here is how the broken code looks like:

.k-list-item-text::before,
.k-list-header-text::before,
.k-list-optionlabel::before {
   content: "​";
   width: 0px;
   overflow: hidden;
}

Here is how to correct code looks like. The special character is there, even though you can't see it.

.k-list-item-text::before,
.k-list-header-text::before,
.k-list-optionlabel::before {
   content: "​"; /* the special character is here */
   width: 0px;
   overflow: hidden;
}

and

.k-skeleton-text:empty::before,
.k-placeholder-line:empty::before {
  content: "​"; /* the special character is here */
}

This is not something new. Our themes have contained this character for a long time. You may wonder why the ASCII notation "\200b" in the source code changes to a special invisible character. This is how the SASS compiler works. We logged an issue to research how to circumvent this behavior. You can also replace the broken notation with "\200b", so that you don't have to deal with special characters.

Overall, the question is - what CSS theme are you using, how did you obtain or create it, and did you make any manual modifications in it?

Regards,
Dimo
Progress Telerik

[lee]

Originally I went to the themes page @ https://www.telerik.com/design-system/docs/themes/kendo-themes/material/. I wanted a local copy but the only option was to download through npm, which isn't part of my workflow. I think I found it on github after some looking. This is with the Material-UI base theme.

 

Thanks for the assistance!