TimePicker ignoring custom skin

[Paul J]

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;
}

[Dimo]

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.

[Paul J]

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><a 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.

[Dimo]

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<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.

[Lisa]

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!