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

RadSplitter Height Not correct in Firefox

1 Answer 93 Views

Splitter

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

Pete asked on 25 Aug 2011, 08:12 PM

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:

<!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>

</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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadSplitter Height Not correct in Firefox

1 Answer, 1 is accepted