I am currently trying out Kendo as a proof-of-concept for a component library solution; however, I am having trouble getting any sort of styling to work.
Using an import statement in my App.vue file and/or including the theme stylesheet in my HTML file seems to cause some strange issues.
It seems that the default themes for the grid(not sure where they are coming from) are overriding the themes that come from Kendo. An example of this is below. The <th> element being created by the Vue Grid tag is shown below:
<th colspan="1" rowspan="1" class="k-header" style="position: sticky; left: 0px; right: 0px; z-index: 1; background: rgb(246, 246, 246);"></th>
Is there any way I can ensure that styles are not put on the HTML elements by default? I am not adding these styles to the elements anywhere in my code, so I am not sure how to get rid of them or how to have the kendo theme override them.
The theme that I am trying to use was created using the vue-ui theme builder. I know that the theme is being used by the application because the grid has some of the theme styling, but some portions of it are being overridden.
The example that I followed to create my grid is below:
https://www.telerik.com/kendo-vue-ui/components/grid-native/custom-rendering/hierarchy/
1 Answer, 1 is accepted
Here you will find a very simple Kendo Vue Grid example in StackBlitz. You will notice that the <th> elements in the Grid do not have any inline styles. May I ask you to modify this sample, so it reveals the injected style attribute issue observed, and send it back to us? This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance on that case.
As per the theme created with the Theme builder, referencing that file should be enough to properly style the widgets. Keep in mind that no other Kendo Theme should be referenced in the project.
Regards,
Veselin Tsvetanov
Progress Telerik