Slider inside panel display problem

6 posts, 1 answers
  1. Vincent Yau
    Vincent Yau avatar
    5 posts
    Member since:
    Jul 2009

    Posted 15 Jul 2009 Link to this post

    Hi,

    I have some slider inside asp:panel.
    but the slider exceed the boundary of the panel.
    How to fix it?

    http://www.freeimagehosting.net/uploads/bf494e033e.jpg

    Thanks,
    Vincent

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vincent Yau
    Vincent Yau avatar
    5 posts
    Member since:
    Jul 2009

    Posted 16 Jul 2009 Link to this post

    Thank you, it is work.

    However, i have another similar question.

    Now the slider is inside the panel and put it usercontrol slider.ascx for RadGrid Edit.

    <EditFormSettings UserControlName="slider.ascx" EditFormType="WebUserControl">
    <EditColumn UniqueName="Edit">
    <EditColumn>
    </EditFormSettings>


    if the grid is excess the height, it will show the scrollbars, when scrolling the slider fixed position again.

    Therefore, which objects should i need add Style="position:relative"?

    Thanks,
    Vincent
  5. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 20 Jul 2009 Link to this post

    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.
  6. Vincent Yau
    Vincent Yau avatar
    5 posts
    Member since:
    Jul 2009

    Posted 20 Jul 2009 Link to this post

    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
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Jul 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017