Using 2024.3.806 for Kendo UI Spreadsheet causes odd styling issues

1 Answer 102 Views

Spreadsheet

Dean asked on 12 Aug 2024, 01:11 PM

All

I have upgraded our Kendo UI spreadsheet jQuery to 2024.3.80, however it is causing strange UI issues.

The UI Loads at a huge zoom level (e.g a single icon taking over the entire screen etc...) so it is unusable

If I swap the stylesheet back to 8.2.1.tabs and all sorts look very strange

My imports are as below

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/2024.3.806/default/default-main.css" rel="stylesheet" />
<!-- <link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-main.css" rel="stylesheet" /> -->
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

1 Answer, 1 is accepted

answered on 15 Aug 2024, 06:44 AM

Hello Dean,

The issue is caused by the version marked in the Kendo themes stylesheet:

<link href="https://kendo.cdn.telerik.com/themes/2024.3.806/default/default-main.css" rel="stylesheet" />

The Kendo themes have their own versions and you can find the list with the compatible version here:

- https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/compatibility

Here is a small Dojo example with a Spreadsheet where the Kendo theme 8.2.1 as demonstrated below is loaded and the component is rendered as expected:

    <link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-main.css" rel="stylesheet" />

I hope this helps.

Regards,
Neli
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Dean

commented on 15 Aug 2024, 04:12 PM

I might be missing something but that is what I have

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<!-- Older Version -->
<!-- <link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-main.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/8.2.1/js/kendo.all.min.js"></script> -->
<!-- Bleeding Edge -->
<!-- <link href="https://kendo.cdn.telerik.com/themes/2024.3.806/default/default-main.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script> -->
<!-- As per Kendo Site -->
<link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-main.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="IMPORT_cs-proscope-estimator-ui-api.js"></script>

however that still leaves the tabs styled like

Neli

commented on 20 Aug 2024, 10:56 AM

Hi Dean,

I modified the dojo example and use the scripts and styles from your last reply. As you will see in the Dojo linked here, the Spreadsheet is loaded as expected. - https://dojo.telerik.com/@NeliK/UNeVeNoM

I would suggest you when loading the page with the Spreadsheet in your application to check the Network tab of the browser to ensure that no custom styles are loaded.

Regards,

Neli