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

RadSlider Width Issue

1 Answer 119 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Mohamed asked on 06 Aug 2012, 09:13 PM
I Have a RadSlider with that code
<telerik:RadSlider ID="RadSliderResBedrooms" runat="server" ItemType="item" Width="350px"
                                Height="70px" AnimationDuration="400" ThumbsInteractionMode="Free"
                                EnableDragRange="true" IsSelectionRangeEnabled="true" SelectionEnd="12" SelectionStart="0" >
                                    <telerik:RadSliderItem Text="1" Value="1" Width="100px" />
                                    <telerik:RadSliderItem Text="2" Value="2" />
                                    <telerik:RadSliderItem Text="3" Value="3" />
                                    <telerik:RadSliderItem Text="4" Value="4" />
                                    <telerik:RadSliderItem Text="5" Value="5" />
                                    <telerik:RadSliderItem Text="6" Value="6" />
                                    <telerik:RadSliderItem Text="7" Value="7" />
                                    <telerik:RadSliderItem Text="8" Value="8" />
                                    <telerik:RadSliderItem Text="9" Value="9" />
                                    <telerik:RadSliderItem Text="10" Value="10" />
                                    <telerik:RadSliderItem Text="11" Value="11" />
                                    <telerik:RadSliderItem Text="12" Value="12" />

The problem that its width when the page first loads is very small and looked crashed but after reloading pages it goes 
that's the crashed slider image:

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 09 Aug 2012, 08:23 AM
Hi Mohamed,

Most probably the CSS resources of the RadSlider are still being loaded when the control is dynamically added on the page through AJAX. The solution for this problem is to ensure that the styles are already loaded. There are two basic ways to do this:
  • Using the GetWebResourceUrl method: 

    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Slider.css") %>' rel="stylesheet" type="text/css" />
     <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadSlider), "Telerik.Web.UI.Skins.Default.Slider.Default.css") %>' rel="stylesheet" type="text/css" />
  • Via the RadStyleSheetManager control:
    <telerik:RadStyleSheetManager ID="theStyleSheetManager" runat="server">
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Slider.css" />
            <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Slider.Default.css" />

You should also disable its embedded base stylesheets and skin so that the control does not try to load the CSS on its own by setting its properties EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins to false.

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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question