CSS issue with RadScheduler (eg. color of H2 elements)

[Marja]

Unfortunately, the Telerik skins don't specify a text color ​for each and every HTML element of the scheduler.

For example, the default styling for the H2 element in the scheduler header seems to be:

.RadScheduler .rsHeader h2 {
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    text-indent: 43px;
    height: 30px;
    display: block;
    overflow: hidden;
}

So now the scheduler picks up whatever color for eg. H2 elements is generally specified in the website, which might not be a suitable color for the scheduler at all.​ 

I understand that I can overrule this in a specific website. But I would like a consistent look of the scheduler elements, regardless of the website styles at hand.

Can you please add default coloring to all control elements in the Telerik control skins?

[Magdalena]

Hello Marja,

Thank you for contacting Telerik support and for your feedback.

As color rule applies to H2 elements affects to RadScheduler, in the same way rules applied to "span", "div", "table" or any other element, can affect to appearance as well. It relates not only to color, but also to many other CSS rules as borders, font rules, backgrounds and many others.

As applying to any general rule to a page can affects to appearance of our controls, it is not possible to add all styles, for all cases, to all elements of our controls.

The solution, that we can advice, is to overwrite your custom rule for H2 elements in the RadScheduler by the following:

.RadScheduler h2 {
    color: inherit;
}

The other option is to overwrite the rules globally by the following:

.RadScheduler * {
    color: inherit;
}

Please, keep in mind, that the second solution could break the layout in some singular cases.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

[Marja]

Hi, 

Thank you for your reply, but neither of these solutions work. The scheduler still picks up the color (and other stuff) which is generally defined in the website for H2 elements.

What was needed was the following:

.RadScheduler h2 {
    color: inherit !important;
    border-bottom: inherit !important;
    font-size: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
}

[Magdalena]

Hello Marja,

The solution works properly at our side. We are sending you this video for your reference. You can test also the sample project in the attachment. If the issue still occurs on your side, could you  please open a support ticket to be able to attach a sample project where the issue will be reproduced, so we could assist you in more efficient way.

Regards,
Magdalena
Telerik