DateTimePicker embeds all styles in the HTML document

2 posts, 0 answers
  1. Martin
    Martin avatar
    199 posts
    Member since:
    Oct 2005

    Posted 09 Dec 2008 Link to this post

    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>  


  3. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 10 Dec 2008 Link to this post

    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.
Back to Top