Hi Guys,
Have just upgraded to the Kendo UI v2024.3.806 along with kendo-theme-classic v8.2.1 and have noticed you can no longer set the $kendo-disabled-opacity & $kendo-disabled-filter variables to override their values because they are now being hard set in the following section within the 'all.scss' file.
// Backward compatibility
// #region @import "./color-system/_swatch-legacy.scss"; -> scss/core/color-system/_swatch-legacy.scss
@if ($kendo-enable-color-system) {
...
$kendo-disabled-opacity: .6;
$kendo-disabled-filter: grayscale(.1);
...
}
This is a regression from
@progress/kendo-theme-classic:8.0.1
where neither of these variables were being hard set.
Also can you confirm what version of the SASS themes are compatible with the latest Kendo UI because the latest version on NPM is now v9.0.0 which was released 3 days prior to Kendo UI v2024.3.806.
NOTE: kendo-theme-classic: 9.0.0 also has these two variables hard set.
Regards
Alan
Other way to diplay the check-box you can use clip-path, may be helpfull for this case.
An exemple working with variables
$kendo-checkbox-border-width: 3;
$kendo-checkbox-border: grey;
$kendo-checkbox-bg: lightgrey;
$kendo-checkbox-checked-bg: blue;
$border-radius: 5px;
$kendo-checkbox-md-size: 32px;
.cbstyle{
appearance: none;
position: relative;
background-color: $kendo-checkbox-bg;
border-width: $kendo-checkbox-border-width;
border-style: solid;
border-color: $kendo-checkbox-border;
border-radius: $border-radius;
height: $kendo-checkbox-md-size;
width: $kendo-checkbox-md-size;
}
.checked::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(#{$kendo-checkbox-md-size} * .8);
height: calc(#{$kendo-checkbox-md-size} * .8);
background-color: $kendo-checkbox-checked-bg;
clip-path: polygon(20% 39%, 8% 39%, 45% 93%, 81% 13%, 70% 13%, 43% 74%); // checkbox icon
}
The documentation for the Telerik Design System says "Starting with themes version 9.0.0, the CSS Utilities are no longer included in the Telerik and Kendo UI themes package."
This will be an issue for how I use the Telerik UI for Blazor package. I use the CSS utilities extensively. They should continue to be included in the themes.
If they are no longer in the themes, it will be very inconvenient to acquire them using NPM. I have no other need for NPM in my Blazor project. If I have to load them separately (which seems like a mistake to me) it would be much more "natural" if they would be distributed via NuGet.
Please consider a USWDS Theme. I'm referring to the design system https://designsystem.digital.gov/
This support would be a great way to incorporate Telerik components into projects for US Goverment clients.
Material 3:
Request for Telerik UI for Blazor toolkit and Figma UI Toolkit to support Material Design 3 (versus 2) guidelines published late October 2021. Competitors are supporting it.
Website is https://m3.material.io/
Kendo SASS themes allow the definition of a variety of colors for grid rows that are applied in different situations:
- $grid-alt-bg defines the color of alternate rows
- $grid-selected-bg defines the color of selected rows
- $grid-selected-alt-bg defines the color of selected alternate rows
However, at least in @progress/kendo-theme-classic (v. 5.4.1), $grid-selected-alt-bg is only applied for locked columns. You can check that by doing a string-search for "$grid-selected-alt-bg" in dist/all.scss. I have not checked if the same happens when using other themes.
Hi, Team!
Currently, the Kendo Material theme is compliant with Material Design 2. I would like to request compliance with Material Design 3.
I would like to request that Telerik host all of the required nuget packages for Telerik.ui.for.Blazor on Telerik's nuget server.
Currently, all of the packages are there except for Telerik.FontIcons and Telerik.SvgIcons which are hosted on nuget.org instead. This is inconvenient when using Package Source mapping, where ideally all Telerik.* packages can be sourced direct from Telerik.
The Kendo-UI "Classic" SASS theme supports the $kendo-calendar-cell-border variable. However, its value is never applied. This also means that variables like $kendo-calendar-cell-selected-border etc. do not have any effect, because they only set the border-color, but not the border itself.
Kendo Theme Version 7.0.2
The Kendo-UI SASS themes support setting the amount of spacing between items using the $kendo-pager-item-spacing variable. However, no spacing is added between the next/previous buttons and the "number" section.
Also, spacing does not work properly if the "select" element is disabled and therefore not displayed.
Kendo Theme Version: 7.0.2
See here:
https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#LL804C1-L804C24
$input-btn-border-width is now a custom variable.
(see bootstrap 5.2 version: https://github.com/twbs/bootstrap/blob/v5.2.3/scss/_variables.scss#L738 where $input-btn-border-width was a simple scss variable)
The main problem is that on file:
@progress\kendo-theme-bootstrap\scss\input\_variables.scss you are using:
$kendo-input-border-width: $input-border-width !default;
$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;so scss compilation gives me an error:
SassError: Undefined operation "var(--bs-border-width) * 2". ╷ 10 │ $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
My temporary fix is to define, before importing _variables file:
$kendo-input-border-width: 1px !default;
Basically, the main problem is that package @progress/kendo-theme-bootstrap 6.4.0 with bootstrap 5.3 doesn't work anymore.
Thanks.
Diego
To reproduce, enable High Contrast mode in the OS and then go to any Splitter demo.
Bug report
On screens with smaller sizes not all tools in the Spreadsheet Toolbar are visible. The tools overlap the overflow button and thus cannot be selected.
Reproduction of the problem
- Run the following demo and reduce the window width
Current behavior
On wider screens all tools are visible:
On narrower screens only some tools are visible and the overflow button is overlapped:
or completely hidden:
Expected/desired behavior
The overflow button should be visible so all Spreadsheet tools are accessible.
Environment
- Kendo UI version: 2020.3.118
- Browser: [all]
In some cases the text for the selected items does not display properly. Some letters, for example g, get their bottom cut off. This behaviour can be observed on for.ex. the Telerik page https://docs.telerik.com/blazor-ui/components/multiselect/overview The picture below was taken on the latest Edge browser, 1080p screen, 100% zoom level. Funnily enough, changing the zoom level either way makes the text fit in the selected items.
How can I increase the space for the text in the selected items so it's less likely to be cut off?
Ellipsis missing on month view
---
ADMIN EDIT
The Ellipsis icon is invisible in Material and Default, partially hidden in Bootstrap. The Show More button is invisible in Material. You can see the issues in the following demo: https://demos.telerik.com/blazor-ui/scheduler/month-view
Here is a workaround to make the Ellipsis icon visible which indicates a button in Material too:
<style>
button.k-more-events > .k-icon.k-i-more-horizontal {
top: initial;
bottom: 0;
transform: translate(-50%);
}
</style>
In version 2.27 of Telerik UI for Blazor the following problematic behavior is observed with long labels in the Grid PopUp edit form:
- If no space is included, they are cut from the form
- If space is included, they are wrapped and not cut but are not matching the alignment of the other labels
Hello,
I prepared a demo https://dojo.telerik.com/EYeYUSUw/6
Also applies to the latest default sass theme but probably to many more.
As you can see, the master grid its 'content row' hover effect is being applied to even the header of the detail grid and there is no way to resolve that unwanted effect apart from adding more styling tedious rules.
The resolution is so simple:
.k-grid tbody tr:hover, .k-grid tbody tr.k-state-hover {
background-color: #e6e6ea;
}
Should be
.k-grid tbody > tr:hover, .k-grid tbody > tr.k-state-hover {
background-color: #e6e6ea;
}
I did not search for the source files/lines what might need to change - easy to find in your current version.
There could be many more of these simple improvements which would save many hours on ours side!
Regards,
Jan