This is a migrated thread and some comments may be shown as answers.

Styling Calendar and DatePicker Selected Date

7 Answers 2401 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Sergey
Top achievements
Rank 1
Sergey asked on 30 Sep 2014, 02:33 AM
Hello!

I built a custom theme in ThemeBuilder for Kendo UI based on Bootstrap theme.  Now I have the colors that I want, except for a couple of places.  For example Calendar and DatePicker Selected Date has a dark gradient in the background.  How do I get rid of it?

I read a proposed solution here: http://stackoverflow.com/questions/13507971/kendo-ui-picker-css-issue, but it doesn't seem to work for me.

Please help me address this!

Thank you!

Sergey

7 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 30 Sep 2014, 12:34 PM
Hi Sergey,

The following CSS rule should help to achieve the expected result: 
.k-calendar td.k-state-focused.k-state-selected {
   box-shadow: none;
}

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sergey
Top achievements
Rank 1
answered on 30 Sep 2014, 11:19 PM
Hi, Iliana!

I pasted this at the end of the custom theme css.  It didn't work...  Added -webkit-box-shadow: none; It still didn't work.

What else can I do?

Thank you!

Sergey
0
Sergey
Top achievements
Rank 1
answered on 30 Sep 2014, 11:21 PM
I think the problem is occurring when the date is selected and has focus.
0
Iliana Dyankova
Telerik team
answered on 01 Oct 2014, 08:37 AM
Hi Sergey, 

I tested the suggested solution and it is working as expected on my side (dojo example). As a suggestion - could you please try to increase the specificity of the CSS selector (for example test it with !important):
.k-calendar td.k-state-focused.k-state-selected {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sergey
Top achievements
Rank 1
answered on 01 Oct 2014, 01:35 PM
Hi, Iliana!

Again, I pasted this code at the end of the custom theme css, and it didn't work.  All I do is import that theme into the ThemeBuilder online, and test there.  Can I send the theme css, and the screen shot, showing the problem to you?

Thank you!

Sergey
0
Accepted
Iliana Dyankova
Telerik team
answered on 02 Oct 2014, 08:18 AM
Hi Sergey,

Thank you for the details. This behaviour is caused by currently Kendo UI ThemeBilder does not contain option for changing the box-shadow, however using the suggested rule in your application should help to achieve the expected result (dojo example).   

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sergey
Top achievements
Rank 1
answered on 06 Oct 2014, 01:18 PM
Thank you for the explanation, Iliana!  It does work!  I was just thinking to iron out all the problems in the ThemeBuilder before using the theme in a project...
Tags
Date/Time Pickers
Asked by
Sergey
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Sergey
Top achievements
Rank 1
Share this question
or