Telerik Forums
KendoReact Forum
1 answer
42 views

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')]
    }
  }
}
Konstantin Dikov
Telerik team
 answered on 22 Feb 2024
1 answer
842 views

I see that KendoReact offers a lot of the CSS utility classes like e.g. Tailwind CSS does. I would like to use those for things like flexbox and CSS grid, but also for generic padding and margins and such, in the same way I would with Tailwind.

Is there any documentation for these utility classes somewhere on the site? I cannot seem to find any.

Also, in my IDE (Webstorm) the autocomplete offers classes prefixed with 'k-' but also '!k-' and 'k-i-'. What is the difference between these?

Lastly, would it be possible to use Tailwind instead of KendoReact's utility classes alltogether?

How would I go about removing the classes from KendoReact if I wanted to? (without having to delete all of them by hand from the ...-all.css files)

Or perhaps better yet... is there a general 'kendo-react' way to use flexbox or css grid classes?

Filip
Telerik team
 answered on 22 Aug 2022
1 answer
59 views

1) Can I use the kendoReact with a typescript template?

2) Is Telerik Dateatime picker in kendoReact support Persian date or another format like in windows app UI?

3) Can we create reports in kendoReact using your report tools?

4) I have already a material UI admin dashboard(https://minimals.cc/). Can I use kendoReact components inside and integrat Their themes (dark and lights)

Filip
Telerik team
 answered on 28 Jul 2022
0 answers
121 views

hey, ive asked a month ago a question about how to make horizontal lines and made the same as the answer
(link to the thread: https://www.telerik.com/forums/how-to-disable-chart-vertical-lines-and-how-to-make-the-lines-rounded#1569854)
but now i have a problem with the chart legend,
the chart legend isnt fixated on the position of each bar and it makes it hard to know which bar its for, example: 

 

and the wanted result: 

1 answer
850 views

Hi , there. 

Recently i tried to use Kendo for React to create PDF document.  But i faced with one issue, i cannot change font size of text. 

No matter what properties i use, and what tags i am using it's always same size, even for <h1>

The wierdest thing that everything else working fine colors, margin, font colors, etc.

This is the example of  code which i am using.

 

.title {
  font-size30pt !important;
  colorgreen;
  font-weightbold;
}

 

return (
    <div>
      <PDFExport
        ref={pdfExportComponent}
        paperSize="A4"
        fileName='Dossiers Export'
      >
        <div style={{height: '2%', width: '100%', background:'#e6ecf0'}}>
         <p className = 'title'>styled</p>
        </div>
      </PDFExport>
    </div>
  );
})

 

Does anyone else faced with this issue. ?

1 answer
198 views

I am using a Kendo React Grid inside a Kendo React Dialog Window component.

When the Window first displays the user inputs a value in a text input and clicks a button to load the grid. The Grid seems to appear behind the Window. I tried adding the: 

.k-animation-container {
  z-index: 10003;
}
to my App.css file. This doesn't help. Do I need to put the style in the Window component code, or is this different from the animation-container issue/problem?

 

Some additional information:

When I open the Dialog Window I see this:

If I type an order number and click "View" I see this:

Part of the top of the grid where the headers should be and the scroll bar appear. That tells me the data loaded and the React state variable updated and caused the grid to redraw.

If I click the minimize icon in the window header and then the click restore icon I see the data:

I can share the code if it helps.

Thanks!

Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?