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

RadSlider does not scroll with the page

6 Answers 98 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Assad
Top achievements
Rank 1
Assad asked on 10 Aug 2009, 10:10 PM
I have dragged the RadSlider control to my web-page. The radslider works fine but it is fixed on the page and does not scroll with the page. This slider is inside Table and the webpage uses master file. Even when it is outside the table it does not scroll. This would be fine if I don't have page long enough to scroll. Looks like I am missing one of the properties. Any help would be appreciated. In demos it seem to scroll along with page. How is this done?

<telerik:RadSlider ID="rsMEDUpdateMedRecord" runat="server" AnimationDuration="400" 
                            Height="42px" ItemType="Tick" LargeChange="1" MaximumValue="5" 
                            TrackPosition="TopLeft" Width="350px" ClickOffset="1" Length="350"   
                            Skin="Vista">  
                        </telerik:RadSlider>   

6 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 12 Aug 2009, 07:41 AM
Hi Assad,
I suppose it is not the page that displays scrollbars in your case (the HTML or BODY element), but another element - a DIV for example. If this is the case, you need to find that scrollable parent of the RadSlider and apply position to it. For example:
<div style="width:400px;height:400px;overflow:auto;position:relative;"

The RadSplider uses the position CSS property to position its HTML elements. That is why, in case it is in a scrollable parent, you have to apply position to that parent in order for the slider to scroll with the rest of the content in it.

Best wishes,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Marlou
Top achievements
Rank 1
answered on 28 Sep 2009, 08:52 AM
Hi!

I have the same problem. I have a div with overflow:auto with a gridview in it. The radslider is used as pagertemplate. But when the grid is too long and the scrollbars of the div shows up, the radslider isn't in the div anymore. I added postion:relative to the div but there is no difference. Another strange thing is that it works fine in ie8 and firefox, just not in ie7. Is there someone with any suggestion?

thanks!
0
Assad
Top achievements
Rank 1
answered on 28 Sep 2009, 01:55 PM

Actualy mine didn't work as said by the admin. My Radslider was inside a Radpane and in the style sheet for Radpane I had to set 

 

position

 

:absolute;. That worked for me. Maybe this is a bug for Radpane.

 

0
Tsvetie
Telerik team
answered on 01 Oct 2009, 07:24 AM
Hello Assad,
I am not quite sure how you have applied the "position:relative" setting for the RadPane. The RadPane does not respect its style attribute and you have to use its CssClass property. For example:
<head runat="server"
    <title></title
    <style type="text/css"
    .ApplyPosition 
    { 
        position:relative; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server"
    </asp:ScriptManager> 
     
    <telerik:RadSplitter ID="RadSplitter1" runat="server"
        <telerik:RadPane ID="RadPane1" runat="server" CssClass="ApplyPosition"></telerik:RadPane> 
        <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane> 
    </telerik:RadSplitter> 
    </form> 
</body> 

Marlou, you have to make sure that the style actually was applied - you can use the developer toolbar for IE
to check the styles that are applied to an element. You should make sure as well, that you have applied the position to the HTML element that displays scrollbars. In case this does not help you, post the code of a simple page that demonstrates the problem here and I will check which element you should apply position to.

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Assad
Top achievements
Rank 1
answered on 01 Oct 2009, 02:04 PM
Hi Tsvetie,
That is the way I did it (by using CSSClass property).
0
Tsvetie
Telerik team
answered on 01 Oct 2009, 02:39 PM
Hello Assad,
The code that I posted works as expected on my side. In case you need help with your implementation, please post the code of your page here or open a new support ticket and send me your code. Once I am able to reproduce the problem locally, I will be able to provide you with more information as to why the CssClass property did not fix the problem for you.

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
Slider
Asked by
Assad
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Marlou
Top achievements
Rank 1
Assad
Top achievements
Rank 1
Share this question
or