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

RadSlider Width Issue

1 Answer 96 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Mohamed
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" >
                                <Items>
                                    <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" />
                                </Items>
                            </telerik:RadSlider>

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:
http://i.imgur.com/wWGm0.png

1 Answer, 1 is accepted

Sort by
0
Slav
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">
        <StyleSheets>
            <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" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>

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.

Greetings,
Slav
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.
Tags
Slider
Asked by
Mohamed
Top achievements
Rank 1
Answers by
Slav
Telerik team
Share this question
or