RadSlider Width Issue

2 posts, 0 answers
  1. Mohamed
    Mohamed avatar
    3 posts
    Member since:
    Jun 2012

    Posted 06 Aug 2012 Link to this post

    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:
  2. Slav
    Slav avatar
    1359 posts

    Posted 09 Aug 2012 Link to this post

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