The Fiori theme is elegant, more modern than the others and most closely resembles what my users want.  However, it styles all of the elements abnormally large.  This isn't optimal for a grid based data-centric application where there is a premium on window real estate.  

Can you develop a Fiori Slim theme that is similar in appearance, but has vertical and horizontal dimensions similar to your other themes?

We have overriden many css properties to achieve this, but it is very time consuming and incomplete.

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

Hi, Team!

Currently, the Kendo Material theme is compliant with Material Design 2. I would like to request compliance with Material Design 3. 

We use Bootstrap and Kendo and currently have to override several Bootstrap colours - and the Kendo equivalents - in order to meet accessibility requirements.

Kendo has a default-ocean-blue-a11y swatch, it would be good if there was a Bootstrap A11y swatch too.

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.

When you have a button inside a MultiSelect Footer template (for example), it is different visualized compared to the same button outside of the component. This comes from the k-list-container that is applied when a button is inside a toolbar.

-------ADMIN EDIT---------

A possible workaround for the scenario is to use custom styles as shown below:

<div class="row">
    <div class="col-2">
        <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                       Icon="k-icon k-i-add"
                       Primary="true">
            New Value
        </TelerikButton>
    </div>

    <div class="col-10">
        <TelerikMultiSelect Data="@(
                                            new List<SelectListItem>()
                                            {
                                                { new SelectListItem { Text = "Text 1", Value = "Value1" } },
                                                { new SelectListItem { Text = "Text 2", Value = "Value2" } },
                                                { new SelectListItem { Text = "Text 3", Value = "Value3" } },
                                                { new SelectListItem { Text = "Text 4", Value = "Value4" } }
                                            })"
                            FilterOperator="StringFilterOperator.Contains"
                            Filterable="true"
                            TItem="SelectListItem"
                            TValue="string"
                            TextField="Text"
                            ValueField="Value">
            <FooterTemplate>
                <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                               Class="my-nested-button"
                               Icon="k-icon k-i-add"
                               Primary="true">
                    New Value
                </TelerikButton>
            </FooterTemplate>
        </TelerikMultiSelect>
    </div>
</div>

@code{
    public class SelectListItem
    {
        public string Value { get; set; }
        public string Text { get; set; }
    }
}

<style>
    .k-list-container .k-button.my-nested-button {
        background-color: #ff6358;
        align-items: flex-start;
        align-self: flex-start;
    }

    .k-list-container .k-button-primary.my-nested-button,
    .k-list-container .k-button.k-primary.my-nested-button {
        /*copy the colors from the basic button*/
        border-color: #ff6358;
        color: #ffffff;
        background-color: #ff6358;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
        /*change the flex alignment form the parent container*/
        align-items: flex-start;
        align-self: flex-start;
    }
</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

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.

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/

Hi

No matter what this is set too on any of the map components the controls only show in the top left.

The enabled parameter works as expected still but not MapControlsPosition on any of its options.

Running the demo code in the REPL does the same thing.

Phil

The Floating Label component position is correct only when using it with medium-sized inputs.

Here is a possible workaround - please adjust the exact pixel values, according to the CSS theme and your preferences.

https://blazorrepl.telerik.com/QUuKYyPu56EBMuTm11 (uses the new Meridian theme by default)

<TelerikFloatingLabel Text="Your Name" Class="small-fl">
    <TelerikTextBox @bind-Value="@Name" Size="sm" Width="200px" />
</TelerikFloatingLabel>

<TelerikFloatingLabel Text="Your Name">
    <TelerikTextBox @bind-Value="@Name" Width="200px" />
</TelerikFloatingLabel>

<TelerikFloatingLabel Text="Your Name" Class="large-fl">
    <TelerikTextBox @bind-Value="@Name" Size="lg" Width="200px" />
</TelerikFloatingLabel>

<style>
    .small-fl {
        --kendo-floating-label-offset-y: 23px;
    }

    .large-fl {
        --kendo-floating-label-offset-y: 31px;
    }
</style>

@code {
    private string Name { get; set; } = string.Empty;
}

For the old Default theme, the workaround is:

    .small-fl {
        --kendo-floating-label-offset-y: 23px;
    }

    .large-fl {
        --kendo-floating-label-offset-y: 31px;
    }

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.

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

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