This is a migrated thread and some comments may be shown as answers.

RadSlider Skin not rendering

3 Answers 152 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Chad
Top achievements
Rank 2
Chad asked on 11 Oct 2011, 01:38 PM
I have a custom paging control that I am using in my application.
The markup for the control is listed below. The problem I am having is that the slider doesn't always render the skin correctly. When it renders the only thing I see is a link with the word "Drag"; please see the attached image. I tried adding the reference to the top of the page to Get the WebResource for the skin but that didn't work. Any help would be greatly appreciated.

<asp:Panel ID="pagerContainer" CssClass="pagercontainer" runat="server">
 
    <table border="0" width="100%" cellpadding="2" cellspacing="2">
        <tr>
            <td valign="middle" width="105px" nowrap="nowrap">
                <asp:Panel ID="LeftContainer" runat="server" CssClass="pagerCommand">
                    <asp:ImageButton AlternateText="First Page" CommandName="First" ID="firstPageButton"
                        ImageAlign="AbsMiddle" ImageUrl="~/Images/first.gif" runat="server" ToolTip="First Page" />
                    <asp:ImageButton AlternateText="Previous Page" CommandName="Previous" ID="previousPageButton"
                        ImageAlign="AbsMiddle" ImageUrl="~/Images/prev.gif" runat="server" ToolTip="Previous Page" />
                </asp:Panel>
            </td>
            <td valign="middle" width="175px">
                <asp:Panel ID="sliderPanel" CssClass="pagerCommand" runat="server">
                <telerik:RadSlider ID="slider" runat="server" AnimationDuration="0" 
                        Orientation="Horizontal" EnableViewState="true"
                    SmallChange="1" ShowDecreaseHandle="false" ShowIncreaseHandle="false" Width="175px"
                    Skin="Web20" AutoPostBack="true"
                    EnableEmbeddedSkins="true">
                </telerik:RadSlider>
                </asp:Panel>
            </td>
            <td valign="middle" width="105px">
                <asp:Panel ID="rightContainer" runat="server" CssClass="pagerCommand">
                    <asp:ImageButton AlternateText="Next Page" CommandName="Next" ID="nextPageButton"
                        ImageAlign="AbsMiddle" ImageUrl="~/Images/next.gif" runat="server" ToolTip="Next Page" />
                    <asp:ImageButton AlternateText="Last Page" CommandName="Last" ID="lastPageButton"
                        ImageAlign="AbsMiddle" ImageUrl="~/Images/last.gif" runat="server" ToolTip="Last Page" />
                </asp:Panel>
            </td>
            <td align="right">
                <asp:Label ID="positionLabel" runat="server" CssClass="pagerinfo" />
            </td>
        </tr>
    </table>
 
<asp:HiddenField ID="SliderHiddenField" runat="server" />
 
</asp:Panel>

3 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 11 Oct 2011, 03:45 PM
Hello Chad,

As I could see from your screehsnots some of the Slider resources are not loaded on the page. I could not tell what is happening with your application, but I have tested your code with a very few changes (I have added some absolute img urls):

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Panel ID="pagerContainer" CssClass="pagercontainer" runat="server">
        <table border="0" width="100%" cellpadding="2" cellspacing="2">
            <tr>
                <td valign="middle" width="105px" nowrap="nowrap">
                    <asp:Panel ID="LeftContainer" runat="server" CssClass="pagerCommand">
                        <asp:ImageButton AlternateText="First Page" CommandName="First" ID="firstPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                            runat="server" ToolTip="First Page" />
                        <asp:ImageButton AlternateText="Previous Page" CommandName="Previous" ID="previousPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                            runat="server" ToolTip="Previous Page" />
                    </asp:Panel>
                </td>
                <td valign="middle" width="175px">
                    <asp:Panel ID="sliderPanel" CssClass="pagerCommand" runat="server">
                        <telerik:RadSlider ID="slider" runat="server" EnableViewState="true" ShowIncreaseHandle="false"
                            Width="175px" Skin="Black" AutoPostBack="true">
                        </telerik:RadSlider>
                    </asp:Panel>
                </td>
                <td valign="middle" width="105px">
                    <asp:Panel ID="rightContainer" runat="server" CssClass="pagerCommand">
                        <asp:ImageButton AlternateText="Next Page" CommandName="Next" ID="nextPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                            runat="server" ToolTip="Next Page" />
                        <asp:ImageButton AlternateText="Last Page" CommandName="Last" ID="lastPageButton"
                            ImageAlign="AbsMiddle" ImageUrl="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/48x48/button_black_rew.png"
                            runat="server" ToolTip="Last Page" />
                    </asp:Panel>
                </td>
                <td align="right">
                    <asp:Label ID="positionLabel" runat="server" CssClass="pagerinfo" />
                </td>
            </tr>
        </table>
        <asp:HiddenField ID="SliderHiddenField" runat="server" />
    </asp:Panel>
    </form>
</body>
</html>

Attached is sliderPlayer.gif showing the result in the browser. I could only guess if this is similar to the result that you expect. If it`s close and it works on my side but does not work on yours, we will need us to send us a simple sample project with your application and the issue reproduced, so we would be able to investigate it further.

As I could see only a picture od the problem, this is also a guess, but it could be the known IE CSS limitation problem, and that`s why some of the CSS resources were not loaded on the page.

There is a blog post on our website: Internet Explorer CSS Limits where the problem is described in detail and suggests several ways to fix the issue.

But in shortly, I will suggest you to add RadStyleSheetManager to your application. RadStyleSheetManager control gives developers the advantage of a simple drag-and-drop to achieve the combination of resources to a single request. All you need is to add a RadStyleSheetManager to your page and the stylesheet requests will be combined into a single request:

<telerik:RadStyleSheetManager ID="RadStyleShM1" runat="server"></telerik:RadStyleSheetManager>

All the best,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Chad
Top achievements
Rank 2
answered on 17 Oct 2011, 02:27 PM
Thanks for the help.You were correct in your assumption of the issue. The issue was related to the 31 stylesheet limitation; which at the time I was unaware of until this issue arose. I  appreciate the quick reply and help with this issue.
0
Denise
Top achievements
Rank 1
answered on 11 Dec 2019, 10:44 AM
Thanks for share this information its so helpful for me
Tags
Slider
Asked by
Chad
Top achievements
Rank 2
Answers by
Bozhidar
Telerik team
Chad
Top achievements
Rank 2
Denise
Top achievements
Rank 1
Share this question
or