Tab content does not respect the EjsTab size transmitted

[Brice FROMENTIN]

Here is the sample :

@page "/Test2"

@using Syncfusion.EJ2.Blazor.Navigations

@using Kairos.Ui.Pages

<style>

    .tab-workaround.e-tab > .e-content {

        width: 100%;

        height: calc(100% - 36px) 

    }

        .tab-workaround.e-tab > .e-content > .e-item {

            width: 100%;

            height: 100%;

        }

</style>

<EjsTab ID="tabs" Height="100%" Width="100%" CssClass="tab-workaround">

    <TabItems>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Tab 1" />

            </ChildContent>

            <ContentTemplate>

                <div style="width:100%;height:100%; overflow:auto; background-color:aquamarine">

                    @for (int index = 0; index < 500; index++)

                    {

                        <div style="width:100%;">TAB 1</div>

                    }

                </div>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Tab 2" />

            </ChildContent>

            <ContentTemplate>

                <div style="width:100%;height:100%;overflow-y:auto; background-color:chartreuse">TAB 2</div>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Tab 3" />

            </ChildContent>

            <ContentTemplate>

                <div style="width:100%;height:100%; overflow-y:auto;background-color:chocolate">TAB 3</div>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</EjsTab>

@code

{

}

With the CSS Workaround, it works but I am not able to calculate side-effects., tyr removing the CssClass of EjsTab and you'll see the issue.

Thx,

Brice.

[Alagumeena Kalaiselvan]

Hi Brice, 

Thanks for contacting Syncfusion support! 

We have validated your reported case “Tab content does not respect when EjsTab size transmitted” and the  tab content styles always depends upon the EjsTab by default. You can override the content styles by using CssClass property and it never cause any side-effects. 

Regards 

Alagumeena.K