RadButtons not Scrolling inside a Pane/Container.

7 posts, 0 answers
  1. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 14 Apr 2011 Link to this post

    I have a fairly complex page with RadSplitters/RadPanes/PanelBars/RadGrids and RadButtons.  When I expand the RadPanelBar, then scroll, the buttons don't seem to scroll with the page.  Locally, in Debug mode, they seem to scroll fine, but when I deploy them to the server, that is when I see the problem.  See attached image.

    I searched this forum but I didn't see many possible solutions.

    thanks

    mark
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 15 Apr 2011 Link to this post

    Hello Mark,

    This is a known problem, that only occurs under IE6 and IE7 browsers: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/. We have an article that explains the problem and shows how to fix it: help article.
    If you can't resolve the issue, please send us a live URL where the issue can be observed and we will do our best to help you. You could also send us a sample code that shows the problems.

    Kind regards,
    Pero
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 15 Apr 2011 Link to this post

    And IE 8(FYI)...That is what I am using. 

    Thanks

    Mark
  5. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 15 Apr 2011 Link to this post

    I've tried the Relative Positioning and it still doesn't seem to work.  See another RadPane HTML below.  I've tried putting the Style attribute on other Rad controls in the hierarchy, but many of them don't support it.  Any more help would be deeply appreciated.

    thanks

    <telerik:RadPane ID="SearchPane" runat="server" Height="100%" Width="20px" 
    Style="position:relative;"><BR>           
    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" 
    SlideDirection="Left" 
    ><BR>               
    <telerik:RadSlidingPane ID="RadSlidingPane1" EnableDock="false" 
    runat="server" Width="240px" Title="Search" Scrolling="Y" 
    ><BR>                   
    <telerik:RadPanelBar ID="RadPanelBar1" 
    runat="server"><BR>                    
    <Items><BR>                        
    <telerik:RadPanelItem runat="server" Width="240px" CssClass="searchForm" 
    ><BR>                            
    <ContentTemplate><BR>                                
    <table class="searchForm" 
    border="0"><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Title<BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:TextBox ID="txtTitleSearch" CssClass="textFields" runat="server" 
    TabIndex="0"<BR>                                                
    Width="200px"></asp:TextBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Author<BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:TextBox ID="txtAuthorSearch" CssClass="textFields" runat="server" 
    Width="200px"></asp:TextBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Submitted By<br 
    /><BR>                                            
    <asp:TextBox ID="txtSubmittedBySearch" CssClass="textFields" runat="server" 
    Width="200px"></asp:TextBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Submitted To<br 
    /><BR>                                            
    <telerik:RadComboBox ID="cboSubmittedToSearch" Skin="WebBlue" 
    MarkFirstMatch="true"<BR>                                                
    EmptyMessage="Type to Search..." runat="server" 
    Width="205px"><BR>                                            
    </telerik:RadComboBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Analyst<br 
    /><BR>                                            
    <telerik:RadComboBox ID="cboAnalystSearch" Skin="WebBlue" 
    EnableAutomaticLoadOnDemand="true"<BR>                                                
    MarkFirstMatch="true" EmptyMessage="Type to Search..." runat="server" 
    Width="205px"><BR>                                                
    <WebServiceSettings Path="../Admin/Controls/AdminService.asmx" 
    Method="GetAnalysts" 
    /><BR>                                            
    </telerik:RadComboBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Elements<br 
    /><BR>                                            
    <asp:TextBox ID="txtElementsSearch" CssClass="textFields" runat="server" 
    Width="200px"></asp:TextBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Log Line (Slow)<br 
    /><BR>                                            
    <asp:TextBox ID="txtLogLineSearch" CssClass="textFields" runat="server" 
    Width="200px"></asp:TextBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Division<BR>                                            
    <asp:CheckBox ID="ckDivisionDT" runat="server" Text="DT" Checked="true" 
    /><BR>                                            
    <asp:CheckBox ID="ckDivisionMX" runat="server" Text="MX" 
    /><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    align="right"><BR>                                            
    <telerik:RadButton ID="btnSearch1" runat="server" Skin="WebBlue" 
    Text="Search" 
    OnClick="btnSearch_Click"><BR>                                            
    </telerik:RadButton><BR>                                            
    <telerik:RadButton ID="btnReset2" runat="server" Skin="WebBlue" Text="Reset" 
    OnClick="btnResetSearch_Click"><BR>                                            
    </telerik:RadButton><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    align="left"><BR>                                            
    <table><BR>                                                
    <tr><BR>                                                    
    <td colspan="2" 
    class="searchSectionLabel"><BR>                                                        
    Coverage 
    Date<BR>                                                    
    </td><BR>                                                
    </tr><BR>                                                
    <tr><BR>                                                    
    <td 
    class="searchSectionLabel"><BR>                                                        
    Start 
    Date<BR>                                                    
    </td><BR>                                                
    </tr><BR>                                                
    <tr><BR>                                                    
    <td 
    class="searchSectionLabel"><BR>                                                        
    <telerik:RadDatePicker ID="txtCoverageStartDate" Skin="WebBlue" 
    runat="server" 
    z-index="0"><BR>                                                        
    </telerik:RadDatePicker><BR>                                                    
    </td><BR>                                                
    </tr><BR>                                                
    <tr><BR>                                                    
    <td 
    class="searchSectionLabel"><BR>                                                        
    End 
    Date<BR>                                                    
    </td><BR>                                                
    </tr><BR>                                                
    <tr><BR>                                                    
    <td 
    class="searchSectionLabel"><BR>                                                        
    <telerik:RadDatePicker ID="txtCoverageEndDate" Skin="WebBlue" runat="server" 
    z-index="0"><BR>                                                        
    </telerik:RadDatePicker><BR>                                                    
    </td><BR>                                                
    </tr><BR>                                            
    </table><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td align="left" valign="top" 
    class="searchSectionLabel"><BR>                                            
    Genre &nbsp; 
    &nbsp;<BR>                                            
    <asp:Image ID="imgGenreSearch" runat="server" ImageUrl="~/Images/Search.gif" 
    Visible="false" 
    /><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:ListBox ID="lstGenreSearch" CssClass="textFields" 
    SelectionMode="Multiple" 
    runat="server"<BR>                                                
    Width="200px" OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged" 
    AutoPostBack="true"><BR>                                            
    </asp:ListBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td colspan="2" 
    class="searchSectionLabel"><BR>                                            
    Recommendation<BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Material<BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:DropDownList ID="ddlRecommendationMaterial" CssClass="textFields" 
    runat="server"<BR>                                                
    Width="200px"><BR>                                                
    <asp:ListItem Value="0" 
    Text=""></asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="1">Pass</asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="2">Consider</asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="3">Recommend</asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="4">N/A</asp:ListItem><BR>                                            
    </asp:DropDownList><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Writer<BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:DropDownList ID="ddlRecommendationWriter" CssClass="textFields" 
    runat="server"<BR>                                                
    Width="200px"><BR>                                                
    <asp:ListItem Value="0" 
    Text=""></asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="1">Pass</asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="2">Consider</asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="3">Recommend</asp:ListItem><BR>                                                
    <asp:ListItem 
    Value="4">N/A</asp:ListItem><BR>                                            
    </asp:DropDownList><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Keyword &nbsp; 
    &nbsp;<BR>                                            
    <asp:Image ID="imgKeywordSearch" runat="server" 
    ImageUrl="~/Images/Search.gif" Visible="false" 
    /><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:ListBox ID="lstKeywordSearch" SelectionMode="Multiple" 
    CssClass="textFields"<BR>                                                
    runat="server" Width="200px" 
    OnSelectedIndexChanged="SearchListBox_SelectedIndexChanged"<BR>                                                
    AutoPostBack="true"></asp:ListBox><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    Notes<BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td 
    class="searchSectionLabel"><BR>                                            
    <asp:CheckBox ID="ckNotesPrivate" runat="server" Text="Private" /><br 
    /><BR>                                            
    <asp:CheckBox ID="ckNotesPublic" runat="server" Text="Public" /><br 
    /><BR>                                            
    <asp:CheckBox ID="ckNotesSysAdmin" runat="server" Text="System Administrator" 
    /><BR>                                        
    </td><BR>                                    
    </tr><BR>                                    
    <tr><BR>                                        
    <td align="right" 
    class="searchSectionLabel"><BR>                                            
    <telerik:RadButton ID="btnSearch" Skin="WebBlue" runat="server" Text="Search" 
    OnClick="btnSearch_Click"><BR>                                            
    </telerik:RadButton><BR>                                            
    <telerik:RadButton ID="btnReset" Skin="WebBlue" runat="server" Text="Reset" 
    OnClick="btnResetSearch_Click"><BR>                                            
    </telerik:RadButton><BR>                                        
    </td><BR>                                    
    </tr><BR>                                
    </table><BR>                            
    </ContentTemplate><BR>                        
    </telerik:RadPanelItem><BR>                    
    </Items><BR>                   
    </telerik:RadPanelBar><BR>               
    </telerik:RadSlidingPane><BR>           
    </telerik:RadSlidingZone><BR>       
    </telerik:RadPane>
  6. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 Apr 2011 Link to this post

    Hi Mark,

    Thank you for the sample code. It helped me reproduce the issue locally.
    The CSS code should be applied to the RadSlidingPane1 control by setting a custom CssClass. I used posRelativeClass:
    <head runat="server">
        <title></title>
        <style type="text/css">
            .posRelativeClass
            {
                position: relative;
            }
        </style>
    </head>
    ......
    .......
    <telerik:RadPane ID="SearchPane" runat="server" Height="100%" Width="1000px">
     <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Right">
      <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" CssClass="posRelativeClass"

    Let me know if you need further assistance.

    Regards,
    Pero
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Nishant
    Nishant avatar
    33 posts
    Member since:
    Jul 2012

    Posted 03 Jul 2013 Link to this post

    Hi,

    I have the same issue (image attached), but i'm using IE 9. This works fine in Chrome.

    I tried adding the CssClass you've suggested in the asp:Panel that surrounds the RadButton. But that makes the whole panel move along with the scrollbar. I also tried adding position:relative to the topmost Panel, but that does not work either.

    Nishant



  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 08 Jul 2013 Link to this post

    Hello,

    Thanks for contacting us. This bug should not be reproducible in IE9, I suppose that you are using IE9 in compatibility mode. Try to put the relative position to any other element that appears to be parent to the RadButton element. You could try to place it to all parental elements, until you find the right one.

    Regards,
    Bozhidar
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017