I have been using the radsplitter and radpanes to manage the layout of a screen in IE9. Everything has been working fine to date with the splitter filling the screen but a couple of my customers have reported problems with the splitter only filling half the page.
I have investigated and it would seem this issue only appears when you run IE7, IE8 or IE9 in compatibility mode.
I essentially have a master page with the following markup:
I then have a content page holding the splitter and associated panels as follows:
The styles used are defined as:
It would appear the reason for the issue is that the pageBody DIV is held in an absolutely positioned DIV that hasn't had the height set to 100%. Does anybody know how I can resolve this issue?
I have investigated and it would seem this issue only appears when you run IE7, IE8 or IE9 in compatibility mode.
I essentially have a master page with the following markup:
<
form
id
=
"form1"
runat
=
"server"
>
<!--Define the page controls-->
<
div
style
=
"float:right"
>
<
telerik:RadSkinManager
ID
=
"radSkinManager"
runat
=
"server"
></
telerik:RadSkinManager
>
</
div
>
<
telerik:RadFormDecorator
ID
=
"radFormDecorator"
runat
=
"server"
/>
<
telerik:RadNotification
ID
=
"radNotification"
runat
=
"server"
></
telerik:RadNotification
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
div
>
<
div
class
=
"pageHeader"
>HEADER</
div
>
<
div
class
=
"pageBody"
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
div
>
<
div
class
=
"pageFooter"
>FOOTER</
div
>
</
div
>
</
form
>
I then have a content page holding the splitter and associated panels as follows:
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
>
<
telerik:RadPane
ID
=
"RadPane1"
runat
=
"server"
>
PANEL1
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"RadSplitBar1"
runat
=
"server"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"RadPane2"
runat
=
"server"
>
<
telerik:RadSplitter
ID
=
"RadSplitter2"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
Orientation
=
"Horizontal"
>
<
telerik:RadPane
ID
=
"RadPane3"
runat
=
"server"
>
PANEL1
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"RadSplitBar2"
runat
=
"server"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"RadPane4"
runat
=
"server"
>
PANEL2
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
asp:Content
>
The styles used are defined as:
.pageHeader {
position
:
absolute
;
left
:
4px
;
top
:
4px
;
right
:
4px
;
height
:
100px
;
background-color
:
red
}
.pageBody {
position
:
absolute
;
left
:
4px
;
top
:
108px
;
right
:
4px
;
bottom
:
108px
;
background-color
:
blue
}
.pageFooter {
position
:
absolute
;
left
:
4px
;
bottom
:
4px
;
right
:
4px
;
height
:
100px
;
background-color
:
green
}
It would appear the reason for the issue is that the pageBody DIV is held in an absolutely positioned DIV that hasn't had the height set to 100%. Does anybody know how I can resolve this issue?