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

Slider inside panel display problem

5 Answers 105 Views

Slider

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

5 Answers, 1 is accepted

answered on 16 Jul 2009, 08:28 AM

Hello Vincent Yau,
As the RadSlider control uses position for some of its HTML elements, you need to apply position to its scrollable container as well. For example:

    
            <asp:Panel ID="Panel1" runat="server" Width="200px" Height="200px"  
        
                Style="background-color:Red;position:relative;overflow:auto;"> 
        
                <telerik:RadSlider ID="RadSlider1" runat="server" Width="400px"> 
        
                </telerik:RadSlider> 
        
            </asp:Panel>

All the best,
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.

Accepted

answered on 20 Jul 2009, 11:12 AM

Hi Vincent Yau,
From the provided information, I am not quite sure whether it is the built-in scrolling functionality of the RadGrid that you use, or it is another element that you scroll. In case it is the RadGrid, you can use the following CSS:

    
            <style type="text/css"> 
        
            .RadGrid .rgDataDiv 
        
            { 
        
                position:relative; 
        
            } 
        
            </style>

In case this does not help you, please post the code of your page here and I will do my best to help.

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.

answered on 21 Jul 2009, 01:50 AM

Thank Tsvetie.
It still has problem.
Below is the related coding of my page.

Main.aspx
-------------------------------
<telerik:RadGrid ID="RelaySetRadGrid" runat="server" Style="position:relative;">
                        <PagerStyle Mode="NumericPages" />
                        <MasterTableView >
                            <Columns>
                                <telerik:GridButtonColumn CommandName="Edit" Text="Edit" UniqueName="Edit">
                                 </telerik:GridButtonColumn>
                            </Columns>
                            <EditFormSettings UserControlName="Edit.ascx" EditFormType="WebUserControl">
                                <EditColumn UniqueName="Edit">
                                </EditColumn>
                            </EditFormSettings>
                        </MasterTableView>
                        <ClientSettings>
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                        </ClientSettings>
                    </telerik:RadGrid>

Edit.ascx
----------------------
<div style="left: 10px">
    <asp:Panel ID="Panel1" runat="server" BorderWidth="2" BorderColor="Black" Style="position:inherit;">
        <asp:Table ID="Table1" runat="server" >
            <asp:TableRow>
                <asp:TableCell >
                     <telerik:RadSlider ID="RadSlider1" runat="server" MinimumValue="0" MaximumValue="1"
                                                            AutoPostBack="true" OnValueChanged="RadSlider1_ValueChanged" />
                </asp:TableCell>
            </asp:TableRow>
          </asp:Table>
    </asp:Panel>
</div>

Thanks,
Vincent

answered on 23 Jul 2009, 12:41 PM

Hi Vincent Yau,
As I already mentioned in my previous post, you should add the following to the HEAD of your page:

    
            <style type="text/css">  
        
            .RadGrid .rgDataDiv  
        
            {  
        
                position:relative;  
        
            }  
        
            </style>

For example, you main.aspx page should look like the following:

    
            <head runat="server"> 
        
                <title></title> 
        
                <style type="text/css">  
        
                .RadGrid .rgDataDiv  
        
                {  
        
                    position:relative;  
        
                }  
        
                </style>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <telerik:RadGrid ID="RelaySetRadGrid" Width="400px" runat="server" OnNeedDataSource="OnNeedDataSource"> 
        
                    <PagerStyle Mode="NumericPages" /> 
        
                    <MasterTableView Width="400px"> 
        
                        <Columns> 
        
                            <telerik:GridButtonColumn CommandName="Edit" Text="Edit" UniqueName="Edit"> 
        
                            </telerik:GridButtonColumn> 
        
                        </Columns> 
        
                        <EditFormSettings UserControlName="Edit.ascx" EditFormType="WebUserControl"> 
        
                            <EditColumn UniqueName="Edit"> 
        
                            </EditColumn> 
        
                        </EditFormSettings> 
        
                    </MasterTableView> 
        
                    <ClientSettings> 
        
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid> 
        
                </form> 
        
            </body> 
        
            </html>

Regards,
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Slider inside panel display problem

5 Answers, 1 is accepted