TimePicker ignoring custom skin

5 posts, 0 answers
  1. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 20 Apr 2010 Link to this post

    Trying to use the timepicker control, setting Skin="mySkin" and EnableEmbeddedSkins="false" , just like i do with any other telerik controls. I've got the .css file included on the page. my DatePicker styles fine, but the TimePicker does not. Looking at the source html, the timepicker html tags do not even get the custom skin. Not sure what the problem is?

    any idea what's going on ? below is my .css styles. are these not the correct style classes for the control anymore?


    <telerik:RadTimePicker ID="RadTimePicker1" Skin="mySkin" EnableEmbeddedSkins="false" runat="server" > 
    <TimeView runat="server" StartTime="07:00:00" EndTime="20:00:10" /> 
    </telerik:RadTimePicker> 

    /*time view*/ 
     
    table.RadCalendarTimeView_mySkin 
        border-collapse:separate
        border:1px solid #75b064
        background:#ffffff
        font:11px "segoe ui",arial,sans-serif
     
    .RadCalendarTimeView_mySkin th 
        border:0; 
        border-bottom:1px solid #a8cf9d
        padding:0 0 1px
        background:#caf2c2 0 -1000px repeat-x url('../_images/Calendar/sprite_green.gif'); 
        color:#006e0b
        text-align:center
        line-height:23px
        cursor:default
        font-weight:normal
     
    table.RadCalendarTimeView_mySkin td 
        border:0; 
        border-left:1px solid #acdb9c
        padding:2px 2px 3px
     
    table.RadCalendarTimeView_mySkin td:first-child 
        border-left:0; 
     
    .RadCalendarTimeView_mySkin a 
        display:block
        padding:2px 6px
        text-align:center
        color:#000000
        text-decoration:none
     
    .RadCalendarTimeView_mySkin td.rcSelected a 
        border:1px solid
     
        padding:1px 5px
        background:#fa83fc 0 -1700px repeat-x url('../_images/Calendar/sprite_green.gif'); 
     
    .RadCalendarTimeView_mySkin td.rcHover a 
        border:1px solid #299926
        color:#299926
        padding:1px 5px
        background:#ff80fd 0 -1600px repeat-x url('../_images/Calendar/sprite_green.gif'); 
     
    .RadCalendarTimeView_mySkin .rcFooter 
        border:0; 
        border-top:1px solid #75b064
        padding:0; 
     

  2. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 21 Apr 2010 Link to this post

    Hello Paul,

    Your CSS code works on a standalone page. See the attached screenshot and send us a runnable demo if the problem persists.

    Kind regards,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 22 Apr 2010 Link to this post

    I'm sure I'm not overwriting the styles for it. what confuses me is the generated HTML does not contain the class name of the styles used in the stylesheet. The stylesheet uses the class .RadCalendarTimeView_mySkin but the generated HTML does not even generate any tags with this same stylesheet.

    here's the outputted HTML

       <div id="ctl00_ContentPlaceHolder1_RadTimePicker1_wrapper" class="RadPicker RadPicker_mySkin " style="display:inline;zoom:1;width:110px;"
        <input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_ContentPlaceHolder1_RadTimePicker1" name="ctl00$ContentPlaceHolder1$RadTimePicker1" type="text" class="rdfd_" value="" /><table cellspacing="0" class="rcTable" style="width:100%;"
            <tr> 
                <td class="rcInputCell" style="width:100%;"><span id="ctl00_ContentPlaceHolder1_RadTimePicker1_dateInput_wrapper" class="RadInput RadInput_mySkin" style="display:block;"><input type="text" id="ctl00_ContentPlaceHolder1_RadTimePicker1_dateInput_text" name="ctl00_ContentPlaceHolder1_RadTimePicker1_dateInput_text" class="riTextBox riEnabled" style="width:100%;" /><input style="visibility:hidden;float:right;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_ContentPlaceHolder1_RadTimePicker1_dateInput" name="ctl00$ContentPlaceHolder1$RadTimePicker1$dateInput" type="text" class="rdfd_" value="" /><input id="ctl00_ContentPlaceHolder1_RadTimePicker1_dateInput_ClientState" name="ctl00_ContentPlaceHolder1_RadTimePicker1_dateInput_ClientState" type="hidden" /></span></td><td><title="Open the time view popup." href="#" id="ctl00_ContentPlaceHolder1_RadTimePicker1_timePopupLink" class="rcTimePopup">Open the time view popup.</a><div id="ctl00_ContentPlaceHolder1_RadTimePicker1_timeView_wrapper" style="display:none;" ><div id="ctl00_ContentPlaceHolder1_RadTimePicker1_timeView"
     
                    <div class="AspNet-DataList"
                        <table cellpadding="0" cellspacing="0" summary=""
                            <caption>Time Picker</caption> 
                            <tbody> 
                                <tr> 
                                    <td><a href="#">7:00 AM</a> 
                                    </td> 
                                    <td><a href="#">8:00 AM</a> 
                                    </td> 
                                    <td><a href="#">9:00 AM</a> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td><a href="#">10:00 AM</a> 
                                    </td> 
                                    <td><a href="#">11:00 AM</a> 
                                    </td> 
                                    <td><a href="#">12:00 PM</a> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td><a href="#">1:00 PM</a> 
                                    </td> 
                                    <td><a href="#">2:00 PM</a> 
                                    </td> 
                                    <td><a href="#">3:00 PM</a> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td><a href="#">4:00 PM</a> 
                                    </td> 
                                    <td><a href="#">5:00 PM</a> 
                                    </td> 
                                    <td><a href="#">6:00 PM</a> 
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td><a href="#">7:00 PM</a> 
                                    </td> 
                                    <td><a href="#">8:00 PM</a> 
                                    </td> 
                                </tr> 
                            </tbody> 
                        </table> 
                    </div> 
                    <input id="ctl00_ContentPlaceHolder1_RadTimePicker1_timeView_ClientState" name="ctl00_ContentPlaceHolder1_RadTimePicker1_timeView_ClientState" type="hidden" /> 
                </div></div></td> 
            </tr> 
        </table><input id="ctl00_ContentPlaceHolder1_RadTimePicker1_ClientState" name="ctl00_ContentPlaceHolder1_RadTimePicker1_ClientState" type="hidden" /> 
    </div> 
    As you can see, the actual "popup" html table does not contain a class attribute at all, let alone one with the class name from the stylesheet.

    can I see the outputted html of your standalone example you used? Thanks.
  4. Dimo
    Admin
    Dimo avatar
    8456 posts

    Posted 22 Apr 2010 Link to this post

    Hi Paul,

    There is little use in exchanging HTML outputs, but you can find mine below, as well as the ASPX page. Please send a runnable demo if the problem persists.

    HTML

    <div id="RadTimePicker1_wrapper" class="RadPicker RadPicker_mySkin " style="display:-moz-inline-stack;width:110px;height:20px;">
        <!-- 2010.1.421.0 --><input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="RadTimePicker1" name="RadTimePicker1" type="text" class="rdfd_" value="" /><table cellspacing="0" class="rcTable" style="width:110px;">
            <tr>
                <td class="rcInputCell" style="width:100%;"><span id="RadTimePicker1_dateInput_wrapper" class="RadInput RadInput_mySkin" style="display:block;"><input type="text" id="RadTimePicker1_dateInput_text" name="RadTimePicker1_dateInput_text" class="riTextBox riEnabled" style="width:100%;" /><input style="visibility:hidden;float:right;margin:-18px 0 0 -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="RadTimePicker1_dateInput" name="RadTimePicker1$dateInput" type="text" class="rdfd_" value="" /><input id="RadTimePicker1_dateInput_ClientState" name="RadTimePicker1_dateInput_ClientState" type="hidden" /></span></td><td><a title="Open the time view popup." href="#" id="RadTimePicker1_timePopupLink" class="rcTimePopup">Open the time view popup.</a><div id="RadTimePicker1_timeView_wrapper" style="display:none;" ><div id="RadTimePicker1_timeView">
                    <table id="RadTimePicker1_timeView_tdl" class="RadCalendarTimeView RadCalendarTimeView_mySkin" cellspacing="0" border="0">
     
                        <tr>
                            <th colspan="3" scope="col" class="rcHeader">Time Picker</th>
                        </tr><tr>
                            <td><a href="#">7:00 AM</a></td><td><a href="#">8:00 AM</a></td><td><a href="#">9:00 AM</a></td>
                        </tr><tr>
                            <td><a href="#">10:00 AM</a></td><td><a href="#">11:00 AM</a></td><td><a href="#">12:00 PM</a></td>
     
                        </tr><tr>
                            <td><a href="#">1:00 PM</a></td><td><a href="#">2:00 PM</a></td><td><a href="#">3:00 PM</a></td>
                        </tr><tr>
                            <td><a href="#">4:00 PM</a></td><td><a href="#">5:00 PM</a></td><td><a href="#">6:00 PM</a></td>
                        </tr><tr>
                            <td><a href="#">7:00 PM</a></td><td><a href="#">8:00 PM</a></td><td></td>
     
                        </tr>
                    </table><input id="RadTimePicker1_timeView_ClientState" name="RadTimePicker1_timeView_ClientState" type="hidden" />
                </div></div></td>
            </tr>
        </table><input id="RadTimePicker1_ClientState" name="RadTimePicker1_ClientState" type="hidden" />
    </div>


    ASPX

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <script runat="server">
     
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    /*time view*/
      
    table.RadCalendarTimeView_mySkin
    {
        border-collapse:separate;
        border:1px solid #75b064;
        background:#ffffff;
        font:11px "segoe ui",arial,sans-serif;
    }
      
    .RadCalendarTimeView_mySkin th
    {
        border:0;
        border-bottom:1px solid #a8cf9d;
        padding:0 0 1px;
        background:#caf2c2 0 -1000px repeat-x url('../_images/Calendar/sprite_green.gif');
        color:#006e0b;
        text-align:center;
        line-height:23px;
        cursor:default;
        font-weight:normal;
    }
      
    table.RadCalendarTimeView_mySkin td
    {
        border:0;
        border-left:1px solid #acdb9c;
        padding:2px 2px 3px;
    }
      
    table.RadCalendarTimeView_mySkin td:first-child
    {
        border-left:0;
    }
      
    .RadCalendarTimeView_mySkin a
    {
        display:block;
        padding:2px 6px;
        text-align:center;
        color:#000000;
        text-decoration:none;
    }
      
    .RadCalendarTimeView_mySkin td.rcSelected a
    {
        border:1px solid;
      
        padding:1px 5px;
        background:#fa83fc 0 -1700px repeat-x url('../_images/Calendar/sprite_green.gif');
    }
      
    .RadCalendarTimeView_mySkin td.rcHover a
    {
        border:1px solid #299926;
        color:#299926;
        padding:1px 5px;
        background:#ff80fd 0 -1600px repeat-x url('../_images/Calendar/sprite_green.gif');
    }
      
    .RadCalendarTimeView_mySkin .rcFooter
    {
        border:0;
        border-top:1px solid #75b064;
        padding:0;
    }
      
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadTimePicker ID="RadTimePicker1" Skin="mySkin" EnableEmbeddedSkins="false" runat="server" >
    <TimeView ID="TimeView1" runat="server" StartTime="07:00:00" EndTime="20:00:10" />
    </telerik:RadTimePicker>
     
    </form>
    </body>
    </html>



    All the best,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Lisa
    Lisa avatar
    4 posts
    Member since:
    Apr 2011

    Posted 30 Jun 2011 Link to this post

    The original poster undoubtedly solved their problem already, but we ran into a similar problem when using the RadDateTimePicker in a web app that was already using the CSS Friendly Control Adapters library... the DataListAdapter in CSS Friendly overrides how the RadTimeView is rendered, and generates the table tag with class="AspNet-DataList". Good times... I hope this helps someone!
Back to Top