radgrid injecting height of 10px

[Stacy]

I have an issue where I have a popup window (windowmanager has height/width that are explicit, is a modal).

This popup contains a html table.  One tr is 20% wide, other is 80%. 

I have a grid in the 20% wide side (left side) and in IE and Chrome it is fine, but in firefox, the .rgDataDiv class is injecting a height of 10px.  In IE and Chrome, the value gets calculated fine.

No ajax.  Any ideas?

Changing AllowScroll="true" to "false" fixes the issue but I want the autoscroll to be true.

<table style="width: 100%; height: 88vh; border-spacing: 0; border-collapse: collapse; border: 0">
    <tr>
        <td width="20%">
            <RadGrid
                ID="PayrollProcessSummaryGrid"
                runat="server"
                GridLines="None"
                Height="100%"
                AutoAssignModifyProperties="true">

                <ClientSettings AllowColumnsReorder="false" ReorderColumnsOnClient="false">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnRowClick="onRowClick" OnGridCreated="onGridCreated" OnCommand="onCommand" />
                </ClientSettings>

                <MasterTableView
                    AutoGenerateColumns="false"
                    CommandItemDisplay="Top"
                    AllowSorting="false">

                    <CommandItemTemplate></CommandItemTemplate>

                    <Columns>
                        <wasp:GridDateTimeControl DataField="field1" LabelText="*field1*" SortExpression="field1" niqueName="field1" />
                        <wasp:GridDateTimeControl DataField="field2" LabelText="*field2*" SortExpression="field2" niqueName="field2" />
                    </Columns>
                </MasterTableView>

            </RadGrid>
        </td>
        <td width="80%">
            <telerik:RadSplitter ID="RadSplitter" runat="server" Orientation="Horizontal" Height="100%" Width="100%" VisibleDuringInit="false" OnClientLoad="onClientLoad" BorderSize="0">
                <telerik:RadPane ID="RadPane" runat="server" Width="100%" />
            </telerik:RadSplitter>
        </td>
    </tr>
</table>

[Stacy]

Comparing IE/Chrome to Firefox:

in the markup I see:

IE/Chrome has a:  div style H=1043, W=1863, firefox has same div with H=1059, W=1863

then table with H=1043, firefox has table with H=1059

then iframe with H=100%, firefox has iframe with H=100%

then table with W=100%, H=88vr, firefox has table with W=100%, H=88vr

then grid with H=100%, firefox has same grid with H=100%

then DIV with class "rgDataDiv" with W=100%, H=851px, firefox has W=100%, H=10px

[Stacy]

that should be "88vh"

[Stacy]

I hacked my way around this for now, again this is a FireFox issue only.

Even though my table has a height set, I had to set my TD to have the same height as well.

So the html was:

<table style="width: 100%; height: 88vh; border-spacing: 0; border-collapse: collapse; border: 0">
    <tr>
        <td style="width:20%">
            <Grid....
                ID="blah"
                runat="server"
                GridLines="None"
                Height="100%"
                AutoAssignModifyProperties="true">

is now

<table style="width: 100%; height: 88vh; border-spacing: 0; border-collapse: collapse; border: 0">
    <tr>
        <td style="width:20%; height:88vh"> <!-- had to set height here for FIREFOX to work -->
            <Grid....
                ID="blah"
                runat="server"
                GridLines="None"
                Height="100%"
                AutoAssignModifyProperties="true">