[Solved] DateTimePicker embeds all styles in the HTML document

[Martin]

Hi, I just discovered that the RadDateTimePicker control embeds all its CSS styles (almost 500 lines of code) inside the generated HTML document (see below for an example). Even worse, if I add a second RadDateTimePicker to the same page, the styles appear twice in the resulting HTML document.

Why does this happen and can it be prevented?

Regards,
Martin

Example HTML document (excerpts) from a page with just one RadDateTimePicker on it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

....

<body>

...

<style type='text/css'>/*Telerik RadCalendar Default skin*/

table.RadCalendar_Default
{
    border-collapse:separate;
    border:0;
    background:#fff;
    font:11px arial,tahoma,sans-serif;
    width:220px;
}

/*titlebar*/

.RadCalendar_Default .rcTitlebar
{
    width:100%;
    border:1px solid;
    border-color:#101010 #090909 #171717;
    padding:0;
    background:#444 url('/TelerikTests2008Q3/WebResource.axd?d=Yi4p-ByImfnF95uhANtR9571aHjWR6sUWxK-qQw1ArGCDBP1B9AVIvBl555xdCsPLhCWnR8j0cUgV7lipYaYDIf33gEKSNwhTLLm5IXyj7M1&t=633631346240000000') 0 -500px repeat-x;
    color:#fff;
}

.RadCalendar_Default .rcTitlebar table
{
    width:100%;
    border-collapse:separate;
    border:0;
    border-bottom:1px solid #3d3d3d;
    font:16px/32px arial,tahoma,sans-serif;
}

.RadCalendar_Default .rcTitlebar td
{
    border:0;
    padding:2px 0 0;
    text-align:center;
    vertical-align:middle;
}

.RadCalendar_Default .rcTitlebar .rcTitle
{
    width:100%;
    cursor:pointer;
}

.RadCalendar_Default .rcTitlebar .rcPrev,
.RadCalendar_Default .rcTitlebar .rcNext,
.RadCalendar_Default .rcTitlebar .rcFastPrev,
.RadCalendar_Default .rcTitlebar .rcFastNext
{
    display:block;
    width:15px;
    height:15px;
    overflow:hidden;
    margin:0 3px;
    background:transparent url('/TelerikTests2008Q3/WebResource.axd?d=Yi4p-ByImfnF95uhANtR9571aHjWR6sUWxK-qQw1ArGCDBP1B9AVIvBl555xdCsPLhCWnR8j0cUgV7lipYaYDIf33gEKSNwhTLLm5IXyj7M1&t=633631346240000000') no-repeat;
    text-indent:-1111px;
    text-decoration:none;
    color:#ccc;
}

.RadCalendar_Default .rcTitlebar .rcPrev
{
    background-position:4px -48px;
}

.RadCalendar_Default .rcTitlebar .rcNext
{
    background-position:4px -98px;
}

.RadCalendar_Default .rcTitlebar .rcFastPrev
{
    margin-left:5px;
    background-position:2px 2px;
}

.RadCalendar_Default .rcTitlebar .rcFastNext
{
    margin-right:5px;
    background-position:2px -148px;
}

.RadCalendar_Default .rcMain
{
    width:100%;
    border:1px solid #222;
    border-top:0;
    padding:0;
}

.RadCalendar_Default .rcMainTable
{
    border-collapse:separate;
    border:0;
    width:89%;
    margin:5px 13px 6px 11px;
    font:11px/16px arial,tahoma,sans-serif;
}

/*header, footer*/

.RadCalendar_Default .rcHeader,
.RadCalendar_Default .rcFooter
{
    border:1px solid #222;
    border-top:0;
    padding:0;
}

... (this goes on for more that 400 lines)

</style>

</body></html>

[Dimo]

Hello Martin,

Please refer to the following forum thread and contact us via a support ticket in case you need a non-trial hotfix.

http://www.telerik.com/community/forums/aspnet-ajax/calendar/invalid-w3c-validation-for-radcalendar.aspx

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.