Override RadCalendarPopup CSS

[Keith]

I developed a web application that uses RadWindows to display many forms, but because of client resolution problems and the required size of the RadWindow, I needed to create optional pages for some of them. This leads me to my problem.

When the page is viewed in a RadWindow, I have a RadTimePicker that I have overridden the location using the RadCalendarPopup class.

.RadCalendarPopup {
    left: 50%;
    margin-left: -32px;
    position: absolute;
    top: 0px;
}

Now, the page will be rendered in a browser window on some occasions, therefore, I need to adjust the top location only when the page is viewed in a browser because a navigation menu is included in the top 50px. Thus, I need to change top to 50px;

One solution I have considered is to have two separate CSS files and simply load them as needed in the code-behind, but it seems overkill to duplicate alot of CSS code just for one rule.

I would use javascript client-side, but I have found that getting the correct wrapper div is quite unreliable.

I will entertain any suggestions.

[Venelin]

Hello Keith,

Thank you for writing.

You can set the desired position of the popup by using the internal function showPopup:

JavaScript:

var picker = $find("<%= RadDatePicker1.ClientID %>");
picker.showPopup(x, y);

where x and y are integers.

Please refer to these help topics: Client-Side Basics and RadDatePicker Client Object where you can find very detailed information on the RadDataPicker client-side API.

I hope this helps.

Regards,
Venelin
Telerik

[Keith]

Is javascript the only solution?

[Galin]

Hello Keith,

The JavaScript allows to set dynamically the coordinates of the popup depending on the position of the menu. However, you can set them only with CSS by using !important:

.RadCalendarPopup
{
    left: 50% !important;
    margin-left: -32px !important;
    top: 0px !important;
}

I hope this helps.

Regards,
Galin
Telerik

[Keith]

I'm familiar with the !important notation. I have to employ it regularly to override much of the default Telerik settings, particularly regarding width and height of controls.

I was hoping there would be some kind of magic that would allow me to set the CSS directly in the codebehind, because that is really the best place for it.
I guess I can add the !important css to a different file and add it to the page as the last item in the composite css file. That should resolve the situation.