Overview
Some components have a ::before pseudoclass with the content property set to the CSS code \200B , which is a zero-width space. However, in our project, this is coming out as ​ in the DOM.
For example, with the <Dialog /> component:
1. We render the dialog within a componet, giving it a title which comes from props
const MyComponent = (props) => {
return (
<Dialog title={props.title} onClose={props.onClose}>
. . .
</Dialog>
)
}2. Locally (running in our development environment) we can see the CSS come out as expected
3. After building and deploying to an environment, the "" gets replaced with ​
Additional Information
After building the project locally, our CSS (build/static/css/main,xyz.css) does not include these symbols:
We are using Craco to build our project:
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [require('autoprefixer')]
}
}
}
1 Answer, 1 is accepted
Hi Matt,
This seems like an encoding issue. The zero-width space symbol should be displayed correctly with UTF-8 encoding, so please make sure that your default font supports the zero-width space Unicode symbol.
You can also try adding explicit UTF-8 encoding:
<head>
<meta charset="UTF-8">Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Hi Konstantin, thank you for your response. I agree that it looks like an encoding problem. Unfortunately, neither of your suggestions have worked.
We had UTF-8 being set in our `<head/>` tag with `<meta http-equiv=Content-Type content="text/html; charset=UTF-8">`. I changed it to `<meta charset="UTF-8">`.
I've also double checked our font. Our font family is: `Roboto,Helvetica Neue,sans-serif`. `Helvetica Neue` and `sans-serif` don't support the zero-width space, however removing them (I did this via developer tools) does not solve the issue.
I can see that the symbols are being introduced in the CSS file itself. When I open it in the network tab, I can see:
However, they are not in the build file:
(From build/static/css/main.4d4bb644.css).
Is there anything else you can suggest? Thank you.
Hi Matt,
You can ensure the css file itself is saved with the correct encoding (although that this would not explain the initial issue).
Another thing you can try is testing the following in your build environment to see if it will work:
<style>
.k-skeleton-text:empty::before {
content: "\200b";
color: red; /* Just to make it visible for testing */
}
</style>
<title>Zero-Width Space Test</title>
</head>
<body>
<div class="k-skeleton-text"></div>
</body>Maybe you can add the style in CSS file, so you can check if there is a problem with Craco.
Hi Matt,
Sorry to dig up an old issue, did you manage to find your issue? We are having a similar issue using Vue.
Kind Regards,
Rob
Hi Rob,
Unfortunately we couldn't find the root cause of the problem. Instead, we had to implement a hack that unsets the content value:
// Strange symbols fix .k-table-list .k-table-group-row:before, .k-placeholder-line:empty:before, .k-skeleton-text:empty:before, .k-input-value-text:before, .k-radio-wrap:before, .k-calendar-infinite .k-calendar-view:after, .k-calendar-navigation:after, .k-calendar-navigation:before, .k-time-list-wrapper.k-focus:after, .k-time-list-wrapper.k-focus:before, .k-time-list:after, .k-time-list:before, .k-multiselecttree .k-input-inner:before, .k-window-title:before, .k-gantt-tasks td:after, .blockquote-footer:before, .k-icon-wrap:before, .k-checkbox-wrap:before, .k-list-header-text:before, .k-list-item-text:before, .k-list-optionlabel:before { content: unset !important; }I hope this helps,
Matt.