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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid inside Tabs height overflow

Thread ID:

Created:

Updated:

Platform:

Replies:

147636 Sep 18,2019 10:52 AM UTC Sep 20,2019 06:01 AM UTC Blazor 3
loading
Tags: Tabs
Fabrizio Alessandro
Asked On September 18, 2019 10:52 AM UTC

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.

Nevitha Ravi [Syncfusion]
Replied On 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 


Fabrizio Alessandro
Replied On September 19, 2019 02:49 PM UTC

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

Nevitha Ravi [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon