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

RadButtons not Scrolling inside a Pane/Container.

6 Answers 60 Views
Button
This is a migrated thread and some comments may be shown as answers.
mark baer
Top achievements
Rank 1
mark baer asked on 14 Apr 2011, 09:50 PM
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

6 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 15 Apr 2011, 09:29 AM
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.

0
mark baer
Top achievements
Rank 1
answered on 15 Apr 2011, 04:38 PM
And IE 8(FYI)...That is what I am using. 

Thanks

Mark
0
mark baer
Top achievements
Rank 1
answered on 15 Apr 2011, 05:22 PM
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>
0
Pero
Telerik team
answered on 18 Apr 2011, 09:14 AM
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.

0
Nishant
Top achievements
Rank 1
answered on 03 Jul 2013, 10:56 PM
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



0
Bozhidar
Telerik team
answered on 08 Jul 2013, 09:32 AM
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.
Tags
Button
Asked by
mark baer
Top achievements
Rank 1
Answers by
Pero
Telerik team
mark baer
Top achievements
Rank 1
Nishant
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or