Completed
Last Updated: 27 Sep 2021 08:25 by ADMIN
Created by: Imported User
Comments: 2
Category: Themes
Type: Feature Request
1
Currently, using npm install --save @progress/kendo-theme-material will get the standard Material Design theme for use across the React Components, but why is Material Black not available this way? (npm install --save @progress/kendo-theme-materialBlack)
Completed
Last Updated: 17 Sep 2021 11:28 by ADMIN
Created by: n/a
Comments: 2
Category: Themes
Type: Feature Request
3
Please add a dark theme similar to Kendo UI for Jquery
Planned
Last Updated: 29 Aug 2021 18:01 by ADMIN
Scheduled for 2022.1
Created by: Bernd
Comments: 0
Category: Themes
Type: Bug Report
5

In the attached sample you will see that the textbox (the second input) is 2px taller than the numeric textbox (the first input). Both of them are several pixels taller than the combo box and date picker.

---

ADMIN EDIT

Related to this issue in the themes repo about improving bootstrap integration.

A workaround can be adding specific height to the widgets you use through the bootstrap classes, for example:

<style>
    input.k-textbox.form-control,
    k-datetimepicker.form-control,
    .k-widget.k-combobox.k-header.form-control {
        height: calc(2.25rem) !important;
    }
</style>

<div class="container-fluid border pt-md-3">
    <div class="row">
        <h5 class="pl-3 pb-3">nach Geschäftsfall suchen</h5>
    </div>
    <EditForm Model="SuchParameter" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallJahr">Fall-Jahr</label>
            </div>
            <div class="col-md-8">
                <TelerikNumericTextBox Id="fallJahrTelerik" @bind-Value="SuchParameter.Jahr" Class="form-control" Arrows="false" />
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallNummer">Fall-Nr.</label>
            </div>
            <div class="col-md-8">
                <TelerikTextBox Id="fallNummer" @bind-Value="SuchParameter.Nummer" Class="form-control" />
            </div>
        </div>

        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="geschaeftsArt">Geschäftsart</label>
            </div>
            <div class="col-md-8">
                <TelerikComboBox Id="geschaeftsArt" ValueChanged="@( (string c) => OnGeschaeftsArtChanged (c))" Value="selectedGeschaeftsArt" ValueField="Art" TextField="Art" ValueExpression="@( () => selectedGeschaeftsArt )"
                                 Data="@GeschaeftsArten" Placeholder="Geschäftsart auswählen" ClearButton="true" Width="100%" 
                                 Class="form-control"/>
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="posteingang">Posteingang </label>
            </div>
            <div class="col-md-8">
                <TelerikDateTimePicker Id=posteingang @bind-Value="@selectedTime" Format="dd.MM.yyyy" Width="100%"
                                       Class="form-control"></TelerikDateTimePicker>
            </div>
        </div>

        <button type="submit" class="btn btn-block btn-primary">Suchen</button>
        <ValidationSummary />
    </EditForm>
</div>

@code{
    public class TheFormModel
    {
        public int Jahr { get; set; }
        public string Nummer { get; set; }
    }

    public class ComboModel
    {
        public string Art { get; set; }
    }

    TheFormModel SuchParameter { get; set; } = new TheFormModel();
    string selectedGeschaeftsArt { get; set; }
    List<ComboModel> GeschaeftsArten { get; set; } = Enumerable.Range(1, 5).Select(x => new ComboModel { Art = $"Art {x}" }).ToList();
    DateTime selectedTime { get; set; }

    void HandleValidSubmit()
    {

    }

    void OnGeschaeftsArtChanged(string v)
    {
        selectedGeschaeftsArt = v;
    }
}

---

Declined
Last Updated: 19 Jul 2021 10:08 by ADMIN
Created by: Avrohom Yisroel
Comments: 0
Category: Themes
Type: Bug Report
1

Adding the form-control class from bootstrap to a textarea causes worng appearance especially when I have autosize set to true.

---

ADMIN EDIT

Here is a workaround:

<style>
    span.k-textarea.form-control {
        border: 0;
        box-shadow: none;
        width: 100%;
        height: auto;
    }

        span.k-textarea.form-control textarea {
            border: 1px solid rgb(206, 212, 218) !important;
            border-radius: 0.25rem !important;
           
        }
</style>

<TelerikTextArea @bind-Value="@theValue" Class="form-control" AutoSize="true" />

@*<textarea class="form-control" @bind="theValue"></textarea>*@

@code{
    string theValue { get; set; } = "one\ntwo\nthree\nfour";
}

---

Completed
Last Updated: 31 May 2021 15:57 by ADMIN
Release 2021.3

When you put a TelerikEditor in a Telerik Form the Format dropdown gets stretched, which forces it onto its own line which doesn't look as good. 

 

Completed
Last Updated: 29 Mar 2021 12:52 by ADMIN
Release 2021.R1.SP.next

Bug report

Reproduction of the problem

  1. Open the following Demo with one of the SASS themes.
  2. Open the filter menu for the ProductName column

Current behavior

There is an additional border around the search input. The border appears when Sass is used.

Expected/desired behavior

The additional border should be removed.

Environment

  • Kendo UI version: 2020.3.915
  • Browser: [all]
Declined
Last Updated: 24 Mar 2021 13:03 by ADMIN
I am using the material theme and when text is typed in the textarea the floating label does not flush to the top of the component but overlaps the text.
Unplanned
Last Updated: 16 Mar 2021 15:06 by ADMIN
Created by: Shawn
Comments: 0
Category: Themes
Type: Feature Request
1
I would like to be able to add custom icons to the input components in my application
Unplanned
Last Updated: 12 Mar 2021 19:52 by ADMIN
Created by: Marc Simkin
Comments: 0
Category: Themes
Type: Bug Report
2

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);
}

---

Unplanned
Last Updated: 10 Mar 2021 08:11 by ADMIN
Created by: Greg
Comments: 0
Category: Themes
Type: Bug Report
1

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>

 

 

Unplanned
Last Updated: 02 Mar 2021 16:22 by ADMIN
ADMIN
Created by: Vasil Yordanov
Comments: 0
Category: Themes
Type: Feature Request
10
A new Kendo UI theme which is in compliance with and extends Zurb Foundation styles -> http://foundation.zurb.com/sites/docs/kitchen-sink.html
Completed
Last Updated: 02 Mar 2021 15:28 by ADMIN
Created by: Aleksandr
Comments: 3
Category: Themes
Type: Bug Report
0

1 - when use bootstrap v4  theme, ddl does not handle long names gracefully, please find in attachment example in bootstrap v4 & silver themes, also here are the dojo exaples

 

v4: https://dojo.telerik.com/AYoXEyoT/5

 

silver: https://dojo.telerik.com/aqIkUSiP/2

 

2 - for grid and separate controls validation message has diff view

 

https://dojo.telerik.com/aBuKaDun/6

 

should be the same

 

 

 

Completed
Last Updated: 02 Mar 2021 07:26 by ADMIN
Release 2021.2
Created by: Anna
Comments: 1
Category: Themes
Type: Bug Report
0

This can be currently observed here: https://demos.telerik.com/kendo-ui/window/events

The "g" in the window title is truncated.

Unplanned
Last Updated: 01 Mar 2021 16:25 by ADMIN
Some of the Kendo UI font icons unicode numbers are reserved in iOS (e.g e007, e006, etc. ). Thus, with the current implementation of the Kendo UI themes, before the font is loaded, the default icons corresponding to these unicode characters are being displayed. This is especially the case with a slow network connection.

A suggestion to handle the issue is to use a font loading strategy that renders an invisible fallback font face, or a font face observer.
Unplanned
Last Updated: 04 Feb 2021 08:53 by ADMIN
Created by: Valid Development Factory
Comments: 1
Category: Themes
Type: Feature Request
0

Hello,

We want to create a custom Material theme for our ASP.NET Core web application. We are using the Sass Theme Builder but can only select predefined color swatches for the "Material" base theme. We would like to be able to set custom colors per "subject" just like you can with the "Default" and "Bootstrap" theme. 
Is this possible or are you blocking this on purpose for some reason?

Thank you in advance.

Unplanned
Last Updated: 21 Jan 2021 12:40 by ADMIN
Created by: Datafyer
Comments: 15
Category: Themes
Type: Feature Request
35

Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.

I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.

-------

Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:

  • Dark (black) theme - you can find a basic sample attached below that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo), you can further tweak things in the Theme Builder app
  • Fluent UI - based on the Fluent UI by Microsoft
  • Kendo Themes such as BlueOpal, Silver and Office 365 - you can generate them from the predefined color swatches on the left hand side of the Theme Builder app
  • Theme that uses CSS, not SASS variables so that it can be customized at runtime - at the moment, you can generate the needed themes and switch them at runtime as shown here.

------

 

In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?

Unplanned
Last Updated: 16 Dec 2020 14:16 by Naveen

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

  1. Run the following demo and reduce the window width

Current behavior

On wider screens all tools are visible:
image
On narrower screens only some tools are visible and the overflow button is overlapped:
image
or completely hidden:
image

Expected/desired behavior

The overflow button should be visible so all Spreadsheet tools are accessible.

Environment

  • Kendo UI version: 2020.3.118
  • Browser: [all]
Unplanned
Last Updated: 04 Dec 2020 12:45 by ADMIN
Created by: Pandiarajan
Comments: 0
Category: Themes
Type: Bug Report
0
kendoui.for.jquery.2020.3.1021.commercial-source\src\styles\mobile\common\modalview.less
Line 56:     box-flex: 1;

kendoui.for.jquery.2020.3.1021.commercial-source\src\styles\mobile\common\buttongroup.less
Line 31:     margin-collapse: separate;

kendoui.for.jquery.2020.3.1021.commercial-source\src\styles\mobile\common\scroller.less
Line 103:     margin-collapse: separate;

kendoui.for.jquery.2020.3.1021.commercial-source\src\styles\web\common\mixins.less
Line 54: 

.flex-align(@alignment) {
    flex-align: @alignment; 
}

Unplanned
Last Updated: 13 Nov 2020 14:36 by ADMIN

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 disabled variant is not focusable, nor does it have sufficient contrast between text and background. This is correct by WCAG rules, but not suitable to my use case.
  • The readonly variant is almost perfect, but the arrow has visual cues that suggest it's interactive (color, hover background, cursor) when it's not.

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.

Under Review
Last Updated: 04 Nov 2020 14:22 by ADMIN
Created by: Fangchun Lim
Comments: 2
Category: Themes
Type: Bug Report
0

Hello Kendo team,

I was trying to achieve a kendo style textbox with an icon on the left, like this

It works fine on LESS-based theme, but on SASS-based theme the nner <input /> element is not getting the proper styling, like this

I have prepared a simple dojo to demonstrate this issue. I have tried all the 3 SASS theme, seems like all of them having same issue.

http://dojo.telerik.com/ecaLaPoH

1 2 3