We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid inside Tabs height overflow

Hello,
I have a Grid inside a TabItem of a EjsTab control and I would like to set Tabs and Grid height to the full height of the parent div.
Actually when there are a lot of rows the Grid height overflows the window height.
If I put the Grid outside the EjsTab it works as expected as the Grid resizes with the parent.

This is the Blazor component:

[CODE]
<div style="height:calc(100vh - 120px);">
    @{ 
        var filterContains = new { @@operator = "contains"};
    }
    <EjsTab CssClass="e-fill" OverflowMode="OverflowMode.Popup">
        <TabItems>
            <TabItem>
                <ChildContent>
                    <TabHeader Text="HEADER"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <EjsGrid @ref="datagrid" DataSource="@Source" AllowFiltering="true" AllowGrouping="true" AllowMultiSorting="true" AllowPaging="true" AllowResizing="true" AllowSelection="true" AllowSorting="true" GridLines="GridLine.Both" Height="100%" Width="100%">
                        <GridPageSettings PageSize="30" />
                        <GridColumns>
                            ...
                        </GridColumns>
                    </EjsGrid>
                </ContentTemplate>
            </TabItem>
        </TabItems>
    </EjsTab>
</div>
[/CODE]

I tried changing the HeightAdjustMode of the EjsTab but I can't get it.

Is there a way to get the EjsTab with inside a Grid to fullfill and resizes with the parent div?

Thank you.

3 Replies

NR Nevitha Ravi Syncfusion Team September 19, 2019 02:18 PM UTC

Hi Fabrizio, 

Greetings from  Syncfusion support. 

We validated the reported issue with shared code block and able to reproduce the issue. When you place Grid within Tab component, the parent element’s height is not set to ‘100%’. So, the issue occurs in Tabs. Please set ‘100%’ to tab template and its parent elements like below code.  

<style> 
    .e-tab .e-content.e-tab .e-content .e-item, .e-tab .e-content .e-item >div, .e-tab .e-content .e-blazor-template { 
        height:100% !important; 
    } 
</style> 

We modified your code and download it from the below link: 

We will consider this as bug “ Rendering tab content with its default height”  in our end.  We will fix and include in our upcoming patch release which is scheduled on end of September 2019. You could keep track of the issue from the following feedback link.  

Regards 
Nevitha 



FA Fabrizio Alessandro September 19, 2019 02:49 PM UTC

Thank you specifying the height of .e-blazor-template it's working as expected!


NR Nevitha Ravi Syncfusion Team September 20, 2019 06:01 AM UTC

Hi Fabrizio, 
  
You are most welcome. Please let us know if you need any further assistance. 
  
Regards, 
Nevitha 


Loader.
Up arrow icon