RadButtons not Scrolling inside a Pane/Container.

[mark baer]

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

[Pero]

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

[mark baer]

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

Thanks

Mark

[mark baer]

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>

[Pero]

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

[Nishant]

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

[Bozhidar]

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