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

radgrid injecting height of 10px

3 Answers 135 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stacy
Top achievements
Rank 1
Stacy asked on 22 Sep 2017, 05:10 PM

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>

3 Answers, 1 is accepted

Sort by
0
Stacy
Top achievements
Rank 1
answered on 25 Sep 2017, 05:56 PM

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

0
Stacy
Top achievements
Rank 1
answered on 25 Sep 2017, 05:58 PM
that should be "88vh"
0
Stacy
Top achievements
Rank 1
answered on 26 Sep 2017, 11:59 AM

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

 

Tags
Grid
Asked by
Stacy
Top achievements
Rank 1
Answers by
Stacy
Top achievements
Rank 1
Share this question
or