Kendo SASS themes allow the definition of a variety of colors for grid rows that are applied in different situations:
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.
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
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.
On wider screens all tools are visible:
On narrower screens only some tools are visible and the overflow button is overlapped:
or completely hidden:
The overflow button should be visible so all Spreadsheet tools are accessible.
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:
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
If I place the DateRangePicker inside a TelerikForm, the start and end input fields are stacked vertically.
If I were to place the control just inside a div, they are arranged horizontally.
How can I get the control to arrange itself horizontally when inside a form?
---
ADMIN EDIT
Here is a reproducible that begins with a short CSS workaround (remove the style to see the issue):
<style>
.k-form .k-daterangepicker-wrap .k-floating-label-container {
display: inline-block;
width: auto;
}
</style>
<div class="demo-section k-form k-form-vertical">
<div class="k-form-field">
<label for="outbound-date" class="k-label k-form-label">Travel Date</label>
<div class="k-form-field-wrap">
<TelerikDateRangePicker @bind-StartValue="@StartValue"
@bind-EndValue="@EndValue"
StartId="outbound-date">
</TelerikDateRangePicker>
</div>
</div>
<div class="k-form-field">
<p>The selected travel date is: <strong>@StartValue.Value.ToLongDateString()</strong> and <strong>@EndValue.Value.ToLongDateString()</strong></p>
</div>
</div>
<div class="demo-section">
<h4><label for="outbound-date">Book your flight tickets</label></h4>
<TelerikDateRangePicker @bind-StartValue="@StartValue"
@bind-EndValue="@EndValue"
StartId="outbound-date">
</TelerikDateRangePicker>
<div class="mt-lg">
<h6 class="kd-demo-heading mt-sm">Selected Dates</h6>
<div><strong>Departure: </strong> @StartValue?.ToString("dd MMM yyyy")</div>
<div><strong>Return: </strong> @EndValue?.ToString("dd MMM yyyy")</div>
</div>
</div>
@code {
public DateTime? StartValue { get; set; } = new DateTime(2020, 4, 3);
public DateTime? EndValue { get; set; } = new DateTime(2020, 4, 10);
}
---
I need my application to be fully WCAG compliant.
I have multiple form fields that are not to be modified by the user, but must be readable by them.
Take the combobox for example: https://dojo.telerik.com/@GaloisGirl/exAZIROW
The same problems occurs for DatePicker (see https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/readonly ) and other widgets.
Please keep in mind the subtle differences in meaning between readonly and disabled and do not just apply disabled styles to readonly widgets.
On creating a custom theme based on the Default v2 theme (its possibly the same with the other SASS themes), if you uncheck a component (e.g., the Editor) in the list so that the modifications do not apply to it, the ResponsivePanel does not work as expected with the created custom theme. On narrow browser window width, the sandwich button appears, but the Menu wrapped by the ResponsivePanel does not hide.
To reproduce:
Expected: the Menu wrapped by the ResponsivePanel hides.
Actual: The Menu remains visible.
Hi,
When using a sass themes , like default-v2 and programmatically execute a set on datasource the dirty-field seems to not have enough time to mark the cell that is changed.
dojo: https://dojo.telerik.com/@utveckling@promosoft.nu/OjebanAX
Original State:
State after cell change:
Reproducible with the Default and Bootstrap SASS themes.
Reproducible in the demos.
Icons are misaligned.
Icons are properly aligned.
See demo:
I'm not sure about other themes but this is the one we use. Submitting so you can provide a fix in next version but can you provide a CSS fix for this that we can add to our page in the meantime?
See attached screenshot.
Thanks!
Hello ladies and gentlemen.
In Bootstrap 4 (and Material) SASS theme the opacity setting for placeholder is missed.
Example: https://demos.telerik.com/kendo-ui/multiselect/index
My fix for Bootstrap 4 (I not known the opacity setting for Material placeholders):
.k-multiselect-wrap {
> .k-readonly {
opacity: 0.7;
}
}
a popup opens a little bit wider than screen what cause skills
https://dojo.telerik.com/AzOHeDIx/3
could you please advise how to proceed?
Thx Alex