radgrid injecting height of 10px

4 posts, 0 answers
  1. Stacy
    Stacy avatar
    117 posts
    Member since:
    Dec 2010

    Posted 22 Sep 2017 Link to this post

    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>
  2. Stacy
    Stacy avatar
    117 posts
    Member since:
    Dec 2010

    Posted 25 Sep 2017 in reply to Stacy Link to this post

    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

  3. Stacy
    Stacy avatar
    117 posts
    Member since:
    Dec 2010

    Posted 25 Sep 2017 in reply to Stacy Link to this post

    that should be "88vh"
  4. Stacy
    Stacy avatar
    117 posts
    Member since:
    Dec 2010

    Posted 26 Sep 2017 Link to this post

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

     

Back to Top