Styling Problems (R3 2022)

[AP]

I've just started a new project and used the latest release of the framework (v2022.3.1109). Unfortunately I've encountered some issues which didn't appear using earlier versions of the framework (pre R1 2022 I believe).

The problems are

• the datepicker control stretches to 100% of the page, if a width is not set in the html attributes (I can't believe this is the default intended behavior)
• I cannot reduce the font-size of the datepicker control regardless of where I put the style statement (parent container, html attributes etc..)
• The same is true for the grid, whereas before font size could be adjusted using the style on the parent div, this no longer works

Is there any documentation detailing the changes from R1 2022 and how to achieve these relatively simple appearance changes?

I'm using bootstrap 5 and the kendo.bootstrap-nordic.min.css  css file.

Thanks

[Eyup]

Hello Andrew,

 

Thank you for contacting us.

My name is Eyup Yusein and I am a Senior Support Officer in the MVC Team. I wanted to shed some light at the situation for better clarification.

Let's consider 2 cases:

1. Upgrading from an old version:

In this case, I strongly suggest that you upgrade to 2021 R3 and not the latest 2022.

The reason for this is that I would like the update to be seamless and easy for you with minimum breaking changes:
https://www.telerik.com/support/whats-new/aspnet-mvc/release-history

The recent version 2022 R1 introduces many enhancements around the Themes of the components, but I am afraid they lead to visual breaking changes and this update requires special attention and time to handle them. You can find more info here:
- https://www.telerik.com/blogs/improvements-coming-telerik-kendo-ui-themes-2022

That's why, my recommendation is that you make the following upgrades:

- from XXXX (old version) to 2021 R3 now
- from 2021 to 2022 latest when you have time to fix any visual glitches

Also, it is possible that you are still using the LESS themes. I am afraid to let you know that they will be deprecated in 2023 and it now may be the right time to switch to SASS themes:
- https://www.telerik.com/blogs/future-plans-telerik-kendo-ui-less-themes
- https://docs.telerik.com/aspnet-mvc/styles-and-layout/less-themes/less-themes-migration

The good news is that once you switch to SASS skins, you will be able to use a single css file:

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-turquoise.min.css" />

But overall, I understand this is not a small task to do. Excuse us for the inconvenience this change might have caused you and I hope all this info will prove helpful.

2. Creating a new MVC web app:

This case should be more straightforward as you can directly start using the SASS themes.

Now, for the points:

1. Yes, this is the default behavior now - instead of having a fixed Width, the input/picker components take the full width of their containers. For instance:

<div class="k-w-300">

2. And for reducing the font-size you can use something like this:

    <style>
      .k-input-md, .k-picker-md {
        font-size: 7px;
      }
    </style>

As demonstrated in this live sample I've prepared for you:
https://dojo.telerik.com/IBABunav/4

Let me know if you find this info helpful.

 

Regards,
Eyup
Progress Telerik

[AP]

Eyup,

Thanks for your response. I did give up on upgrading a project to the 2022 version, however I'm working on a  new project, so it seems better to use the latest version.

Where are all the styles documented please? I'm going to need to resize lots of controls (dropdown lists, grids etc...)., not always with the same size. If you're going to change how things work and require the internal styles to be modified, I'd expect you to properly document this.

I've checked your demo out, and only the size of the selected date has changed, not the pop-up calendar.

On one page I have some drop-down lists at the top of the page for filtering along with the date picker, which could do with reducing slightly, however the grid contains quite a few columns, so will probably need to be a bit smaller .  How can I accomplish this?

This change does seem a bet of a backwards step in flexibility.

 

[Eyup]

Thank you for sharing your feedback with us.

I will try to help you overcome this styling problems. The new appearance configuration of the components is explained in their individual dedicated article. Here is the one for DropDownList:
https://docs.telerik.com/aspnet-mvc/html-helpers/editors/dropdownlist/appearance

You can use this new property to control the size of the components:

    @(Html.Kendo().DropDownList()
        .Name("categories")
        .Size(ComponentSize.Medium)

Similarly, you can do the same for the DatePicker, TextBox, etc.

As for the Grid columns question, can I kindly ask you to share additional details? What exactly you want to achieve? Can you send me some sample images for clarification?

[AP]

Eyup,

Thanks for the response. I am a bit bemused by the explanation for the changes as giving more choice. Small, medium and large seems a much smaller choice than the option of specifying the exact font size in the parent element.

After trying the small setting, it doesn't seem that small. I definitely think there's a need to have at least a very small option as well. How could I make the drop-downs (and date-picker) smaller still?

I've attached a screenshot of my current projects grid. I need to reduce the text size so the header text is shown and when in-line editing is triggered, the update/cancel buttons are shown on the same line.

I've also attached a screenshot of a previous project with a very data heavy grid, which uses a much smaller size (grid and drop-downs etc.). It would be good to know how to achieve this as well.  

Currently my impressions of the 2022 release aren't positive, and the styling issue is pretty much a deal-breaker at the moment.

Thanks

[Eyup]

Happy New Year,

Thank you for sharing your feedback. You can imagine that we, the Support Team, were shared this same feedback many times during the previous year 2022 and we forwarded this feedback to our managers and decision takers.

To be frank with you, I agree with this feedback - I also shared my personal concerns and warned about the potential consequences. The thing is that this change is decided for the greater good and modernization of the Toolset in the long run. But at the same time, this experience was a nice lesson in decision taking and it will lead to a deeper caution impact when making such changes next time (I hope it won't be necessary).

But generally, all the font size in the page can be modified using the right CSS rules. Can you let me know if this datepicker approach is not appropriate for your currrent project?

[AP]

Eyup,  My most pressing need  is to find a way to reduce the font-size of the grid.

Being able to go smaller than the ComponenetSize setting allows with the other controls would also be useful as well.

Not being able to adjust the size of the grid without altering the internal styles seems like a bug to me.

Surely there is a way to just reduce the font-size of the grid?

[Patrick | Technical Support Engineer, Senior]

Hi Andrew,  I have replied to the ticket regarding the Grid's font-size.  Please feel free to continue the conversation in the support thread specific to the Grid.