Hello,
I'm having a problem with a RadSplitter displaying properly in firefox ( I'm testing in version 3.6). In IE it displays to the full height of 100%. In Firefox it displays to about 50% of the page. Funny thing is if I set the RadSplitter to a fixed height of say 700px instead of 85% it looks fine. We prefer not to set the height to a fixed value and use percentages instead.
Code below:
Please advise on what I'm missing. thanks.
I'm having a problem with a RadSplitter displaying properly in firefox ( I'm testing in version 3.6). In IE it displays to the full height of 100%. In Firefox it displays to about 50% of the page. Funny thing is if I set the RadSplitter to a fixed height of say 700px instead of 85% it looks fine. We prefer not to set the height to a fixed value and use percentages instead.
Code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
style
type
=
"text/css"
>
.StdFont {FONT-SIZE: 11px; FONT-FAMILY: Arial; vertical-align: top;}
.BoldFont {FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: Arial; vertical-align: top; padding-right:5px}
.TableBase { width: 100%;}
.Textfont{FONT-FAMILY:Arial;FONT-SIZE:11px;}
.ReqFont{FONT-SIZE: 0.9em; FONT-FAMILY: Arial; FONT-WEIGHT:Bold;}
.AjaxLoadingPanelBackground { height: 100%; background:#fff; }
.AjaxLoadingPanel { margin-top: 25px; }
</
style
>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
style
=
"height:100%; margin=0px;"
>
<
head
runat
=
"server"
>
<
title
>My Maintenance</
title
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=EmulateIE7"
/>
</
head
>
<
body
style
=
"margin:0px;height:100%;overflow:hidden; cursor:default;"
>
<
form
id
=
"form1"
runat
=
"server"
>
<
script
language
=
"javascript"
type
=
"text/javascript"
>
function checkallList(source)
{
var lbl = source.nextSibling;
var chkBoxlist = <%=lblBranchSelection.ClientID %>;
var chkBoxCount = chkBoxlist.getElementsByTagName("input");
var i;
for(i = 0; i <
chkBoxCount.length
; i++)
{
if (source.checked)
{
lbl.innerHTML
=
'Deselect All'
chkBoxCount[i]
.checked
=
true
;
}
else
{
lbl.innerHTML
=
'Select All'
chkBoxCount[i]
.checked
=
false
;
}
}
}
</script>
<
rad:RadScriptManager
runat
=
"server"
ID
=
"radSM"
AsyncPostBackTimeout
=
"3600"
></
rad:RadScriptManager
>
<
cc1:header
id
=
"Header1"
title
=
"My Maintenance"
runat
=
"server"
></
cc1:header
>
<
asp:Panel
ID
=
"pnlMain"
runat
=
"server"
>
<
div
>
<
rad:RadSplitter
runat
=
"server"
id
=
"RadSplitter1"
Orientation
=
"Vertical"
width
=
"98%"
height
=
"85%"
LiveResize
=
"True"
HeightOffset
=
"10"
VisibleDuringInit
=
"false"
>
<
rad:RadPane
runat
=
"server"
id
=
"LeftPane"
width
=
"2%"
Collapsed
=
"false"
>
<
rad:RadSlidingZone
ID
=
"RadSlidingZone2"
runat
=
"server"
ExpandedPaneId
=
"RadSlidingPane1"
DockedPaneId
=
"RadSlidingPane1"
>
<
rad:RadSlidingPane
ID
=
"RadSlidingPane1"
runat
=
"server"
EnableDock
=
"true"
MinWidth
=
"355"
CollapseMode
=
"Both"
Title
=
"Filter"
TabView
=
"TextOnly"
Width
=
"380px"
>
<
asp:Panel
ID
=
"pnlHolder"
runat
=
"server"
>
<
vpw:MyLink
ID
=
"lnkMy"
runat
=
"server"
Type
=
"MyPage"
/>
<
br
/>
<
asp:Panel
id
=
"pnlSelection"
Width
=
"95%"
HorizontalAlign
=
"Center"
Runat
=
"server"
GroupingText
=
"Filter Criteria"
CssClass
=
"BoldFont"
>
<
br
/>
<
table
cellspacing
=
"0"
cellpadding
=
"0"
width
=
"100%"
>
<
tr
>
<
td
valign
=
"top"
width
=
"20%"
align
=
"left"
></
td
>
<
td
></
td
>
</
tr
>
<
tr
>
<
td
valign
=
"top"
width
=
"20%"
align
=
"left"
>
<
asp:Label
id
=
"lblDepts"
Runat
=
"server"
CssClass
=
"BoldFont"
>Department:</
asp:Label
></
td
>
<
td
valign
=
"top"
align
=
"left"
>
<
asp:dropdownlist
ID
=
"ddlDepts"
runat
=
"server"
CssClass
=
"StdFont"
>
</
asp:dropdownlist
></
td
>
</
tr
>
<
tr
>
<
td
valign
=
"top"
align
=
"left"
>
<
asp:Label
id
=
"lblBranch"
Runat
=
"server"
CssClass
=
"BoldFont"
> Branch:</
asp:Label
></
td
>
<
td
valign
=
"top"
align
=
"left"
>
<
asp:Panel
ID
=
"pnlBranchList"
runat
=
"server"
Width
=
"95%"
Height
=
"150px"
ScrollBars
=
"Auto"
>
<
asp:CheckBoxList
ID
=
"lblBranchSelection"
runat
=
"server"
Width
=
"93%"
BorderWidth
=
"1"
BorderStyle
=
"Solid"
CssClass
=
"StdFont"
Font-Bold
=
"false"
>
</
asp:CheckBoxList
>
<
asp:CheckBox
ID
=
"chkSelectAllList"
runat
=
"server"
onclick
=
"javascript:checkallList(this)"
Text
=
"Select All"
/>
</
asp:Panel
>
</
td
>
</
tr
>
<
tr
>
<
td
valign
=
"top"
align
=
"left"
>
</
td
>
<
td
valign
=
"top"
align
=
"left"
>
</
td
>
</
tr
>
</
table
>
</
asp:Panel
>
<
br
/>
<
asp:Panel
ID
=
"pnlFilter"
Runat
=
"server"
Width
=
"90%"
HorizontalAlign
=
"Center"
GroupingText
=
"Additional Filter Criteria"
CssClass
=
"BoldFont"
>
<
br
/>
<
table
cellspacing
=
"0"
cellpadding
=
"0"
width
=
"100%"
>
<
tr
>
<
td
valign
=
"top"
align
=
"right"
>
<
asp:Label
id
=
"Label1"
Runat
=
"server"
CssClass
=
"BoldFont"
>Status: </
asp:Label
></
td
>
<
td
valign
=
"top"
align
=
"left"
>
<
asp:CheckBoxList
ID
=
"chklstStatus"
runat
=
"server"
Width
=
"93%"
BorderWidth
=
"2"
BorderStyle
=
"Inset"
CssClass
=
"StdFont"
Font-Bold
=
"false"
>
</
asp:CheckBoxList
>
<%--</
asp:Panel
>--%>
</
td
>
</
tr
>
</
table
>
</
asp:Panel
>
<
asp:Panel
ID
=
"pnlButton"
runat
=
"server"
>
<
table
>
<
tr
>
<
td
valign
=
"top"
align
=
"left"
>
<
asp:Button
ID
=
"btnRefreshGrid"
runat
=
"server"
Text
=
"Refresh Grid"
OnClick
=
"btnRefreshGrid_Click"
>
</
asp:Button
>
</
td
>
</
tr
>
</
table
>
</
asp:Panel
>
</
asp:Panel
>
</
rad:RadSlidingPane
>
</
rad:RadSlidingZone
>
</
rad:RadPane
>
<
rad:RadSplitBar
runat
=
"server"
id
=
"RadSplitBar1"
/>
<
rad:RadPane
runat
=
"server"
id
=
"RightPane"
Width
=
"100%"
>
<
rad:RadSplitter
runat
=
"server"
id
=
"InnerSplitter"
Orientation
=
"Horizontal"
LiveResize
=
"true"
>
<
rad:RadPane
runat
=
"server"
id
=
"TopPane"
Height
=
"30%"
Width
=
"98%"
>
<
asp:Panel
id
=
"pnlGrid"
Width
=
"98%"
HorizontalAlign
=
"Center"
Runat
=
"server"
borderwidth
=
"0px"
Height
=
"98%"
>
<
rad:RadGrid
id
=
"RadGrid1"
ShowStatusBar
=
"false"
runat
=
"server"
AllowPaging
=
"True"
AllowSorting
=
"True"
AllowMultiRowSelection
=
"False"
AutoGenerateColumns
=
"false"
EnableViewState
=
"true"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
OnItemCommand
=
"RadGrid1_ItemCommand"
Width
=
"100%"
Height
=
"100%"
Skin
=
"Windows7"
AllowFilteringByColumn
=
"true"
EnableLinqExpressions
=
"false"
>
<
MasterTableView
Width
=
"98%"
TableLayout
=
"Fixed"
EnableViewState
=
"true"
CommandItemDisplay
=
"None"
>
<
Columns
>
<
rad:GridTemplateColumn
UniqueName
=
"CheckBoxTemplateColumn"
HeaderStyle-Width
=
"3%"
AllowFiltering
=
"false"
Resizable
=
"false"
>
<
ItemTemplate
>
<
asp:CheckBox
id
=
"CheckBox1"
OnCheckedChanged
=
"ToggleRowSelection"
AutoPostBack
=
"True"
runat
=
"server"
></
asp:CheckBox
>
</
ItemTemplate
>
</
rad:GridTemplateColumn
>
<
rad:GridButtonColumn
UniqueName
=
"GridNewList"
ButtonType
=
"ImageButton"
CommandName
=
"NewList"
HeaderStyle-Width
=
"5%"
HeaderText
=
"Add Rule"
Resizable
=
"false"
ImageUrl
=
"Images\Plus.png"
>
</
rad:GridButtonColumn
>
<
rad:GridBoundColumn
DataField
=
"PublicKey"
DataType
=
"System.String"
HeaderText
=
"ID"
Visible
=
"True"
UniqueName
=
"PublicKey"
HeaderStyle-Width
=
"55px"
AllowFiltering
=
"true"
Resizable
=
"true"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
>
<
ItemStyle
/>
</
rad:GridBoundColumn
>
<
rad:GridBoundColumn
DataField
=
"Key"
DataType
=
"System.Int32"
HeaderText
=
" ID Key"
Visible
=
"False"
UniqueName
=
"Key"
HeaderStyle-Width
=
"30px"
AllowFiltering
=
"false"
Resizable
=
"false"
>
<
ItemStyle
/>
</
rad:GridBoundColumn
>
<
rad:GridBoundColumn
DataField
=
"Name"
DataType
=
"System.String"
HeaderText
=
"Name"
UniqueName
=
"Name"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
HeaderStyle-Width
=
"15%"
AllowFiltering
=
"true"
>
<
ItemStyle
/>
</
rad:GridBoundColumn
>
<
rad:GridBoundColumn
DataField
=
"Status"
DataType
=
"System.String"
HeaderText
=
" Status"
UniqueName
=
"Status"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Left"
HeaderStyle-Width
=
"40px"
AllowFiltering
=
"false"
Visible
=
"true"
Resizable
=
"false"
>
<
ItemStyle
/>
</
rad:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
EnableRowHoverStyle
=
"true"
Resizing-AllowColumnResize
=
"true"
Resizing-AllowRowResize
=
"false"
Resizing-EnableRealTimeResize
=
"false"
Resizing-ClipCellContentOnResize
=
"false"
AllowColumnsReorder
=
"true"
EnablePostBackOnRowClick
=
"true"
>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
Height
=
"10px"
VerticalAlign
=
"Bottom"
Position
=
"Bottom"
></
PagerStyle
>
</
rad:RadGrid
>
</
asp:Panel
>
</
rad:RadPane
>
<
rad:RadSplitBar
runat
=
"server"
id
=
"RadSplitBar2"
EnableResize
=
"true"
Height
=
"100%"
/>
<
rad:RadPane
runat
=
"server"
id
=
"BottomPane"
Width
=
"98%"
>
<
iframe
id
=
"frm1"
runat
=
"server"
width
=
"100%"
height
=
"100%"
frameborder
=
"0"
></
iframe
>
</
rad:RadPane
>
</
rad:RadSplitter
>
</
rad:RadPane
>
</
rad:RadSplitter
>
</
div
>
</
asp:Panel
>
<
cc1:footer
id
=
"Footer1"
runat
=
"server"
Height
=
"11px"
></
cc1:footer
>
</
form
>
</
body
>
</
html
>
Please advise on what I'm missing. thanks.