Unnecessary scroll bars appearing in IE8
- by Abhishek Jain
Hi,
In my web app there is a page(ChildPage) which is actually contained in an iframe element of another page(ParentPage).
This ChildPage has its contents placed in ContentPlaceHolder of a MasterPage.
<div id="DivScroll" runat="server" style="overflow-y: auto; overflow-x: auto; width: 100%;
height: 100%;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
As apparent in the code, contents of ChildPage are scrollable in the div containing it.
There is never the need for the scroll bars of browser to appear and it is working this way till IE7.
In IE8 browser scrollbras are appearing due to the presence of the following div in ChildPage.
<div class="ReadOnlyFlat" id="Div1" style="z-index: 100; visibility: hidden; overflow: auto;
width: 100%; position: absolute; height: 300px" runat="server" ms_positioning="FlowLayout">
<radA:RadAjaxPanel ID="RadAjaxPanelA" EnableOutsideScripts="True" runat="server">
<radT:RadTreeView ID="RadTreeView2" TabIndex="1" runat="server" Skin="web20">
<NodeTemplate>
<asp:Label ID="Label2" runat="server">Label</asp:Label>
<asp:Label ID="Label4" runat="server" Width="10px"></asp:Label>
<asp:Label ID="Label3" runat="server" ForeColor="#FF8000" Font-Bold="True">Label</asp:Label>
</NodeTemplate>
</radT:RadTreeView>
</radA:RadAjaxPanel>
What actually happens in IE8 is as follows:
The above div Div1 is diaplyed on the click of an ImageButton.
On the page load this ImageButton is present on the bottom of the page. In this case IE8 shows browser's vertical scrollbar due to height of Div1.
When I scroll DivScroll shown in first code snippet, the ImageButton moves up.
When the ImageButton is moved sufficiently up so that it is above the bottommost part of page by more than 300px(i.e, the height of Div1) and if I click the ImageButton, the browser's vertical scrollbars disappear.
Browser's vertical scrollbar appears in case the distance between ImageButton and the bottom most part of page is less than height of Div1 and disappears when the distance is more than height of Div1.
I need that the browser's vertical scrollbar never appears.
Please Help.
