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

Apply CSS on Button Inside Calendar in RadDateTimePicker

1 Answer 138 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Yefta
Top achievements
Rank 1
Yefta asked on 23 Mar 2015, 07:47 AM
Hai, i got a problem using RadDateTimePicker.
I'm using a css class to apply style on button globally
The CSS style is like this:

button, input[type="button"], input[type="submit"]
 {
 border:2px solid #DFDFDF; -webkit-border-radius: 6px; -moz-border-radius: 6px;
 font-size:11px;font-family:tahoma, verdana, arial, sans-serif; padding: 4px 12px 4px 12px; text-decoration:none; display:inline-block;font-weight:bold; color: #141414;
 background-color: #E6E6E6; background-image: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC));
 background-image: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: -moz-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: -ms-linear-gradient(top, #E6E6E6, #CCCCCC);
 background-image: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
 cursor: pointer;
  }
   
button, input[type="button"], input[type="submit"]:hover
{
    cursor: pointer;
    color: #414141;
    background-color: #cdcdcd; background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);
 }
   
button, input[type="button"], input[type="submit"]:disabled
{
    opacity: 0.65;
    cursor: not-allowed;
}

and it makes the button ("Today", "OK", "Cancel") inside Calendar in RadDateTimePicker (On Calendar, Click on month, and it shows the button) is looks like disabled, and the cursor is "not-allowed" when i hover on it.

How to override the style on the button?

I have attach the image, it looks like disabled and the cursor is "not-allowed" (the screenshot in windows doesn't shows cursor, but believe me it's changed) 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 25 Mar 2015, 04:36 PM
Hello Yefta,

Since you are overriding the styles of the input elements through your global CSS, you need to override them by a selector to the RadCalendar buttons. The CSS below is the selector for those input elements:
div .RadCalendarMonthView .rcButtons input {
    background: #fff;
    border: 1px solid #333;
    color: #000;
}
 
div .RadCalendarMonthView .rcButtons input:hover {
    background: #eee;
    border: 1px solid #333;
    color: #000;
    cursor: pointer;
}

Hope this helps.

Regards,
Konstantin Dikov
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Calendar
Asked by
Yefta
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or