Icon for DatePicker Too High

[Joe]

The icon on my date picker is too high... it should be centered in the dropdown box.  What CSS do I need to modify to get it to look right?

 

 

[Tsvetomir]

Hi Joe,

In general, the icons of the Kendo UI DatePicker are centered and aligned with the main content. Can you ensure that the common CSS file has been included? More information on the needed files could be found in the following articles:

• https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling
• https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes

Also, as a quick workaround, you could manually include the margin-top style:

    <style>
      span.k-icon.k-i-calendar{
        margin-top: 10px;
      }
    </style>

Let me know in case the issue is still present.

 

Kind regards,
Tsvetomir
Progress Telerik

[Joe]

Thank you, this worked for me.

Our CSS is so messed up from when previous developers tried to style all the Kendo components so they actually looked good, but unfortunately, it's more of a mess than a success.  We cannot use the regular styles that came with the product because they all look like crap.  We stopped getting updates because every update broke something else, and just became more problematic than not.  It's a shame because I love the functionality of the Telerik components, they all just look absolutely horrible for web apps.  Great for mobile apps, but we don't do mobile apps.  We need good looking web application components that make the best use of the page real estate, not large, mostly empty heavily padded components.

[Tsvetomir]

Hi Joe,

Thank you for taking the time to provide your feedback on the Kendo UI widgets. It is appreciated.

In general, the library mainly aims at targeting the web environment and is web-oriented. In general, the main issues with the styles come from the fact that certain themes require having more than one file. More information for each of the Less and Sass themes could be found here:

• Sass-based themes
• Less-based themes

An important aspect of the styles is that they have to be updated accordingly. Whenever the dll for the server-side wrappers is updated, the corresponding client-side JavaScript and style resources have to be updated as well.

It is correct that the main goal for the live demos is to show isolated example of a single widget with specific functionality. However, the library provides a handful of sample applications. The main purpose of those is to show the incorporation of multiple Kendo UI widgets into a single web app. You could navigate to them by accessing the landing page for the live demos - they are located on the right-hand side of the page:

https://demos.telerik.com/aspnet-mvc/

Here is a direct link to one of them:

https://demos.telerik.com/aspnet-mvc/tripxpert/

I hope you find this helpful.

 

Best regards,
Tsvetomir
Progress Telerik