Flexbox not working in SfTab content

[John]

Hi, 

I am having issues using a flexbox inside the SfTab control in blazor.  Please see image below.  Inside the tab content, the flexbox settings do not work (left hand of image), while without a tab (right hand side in image) the same code works.  Repro code also below.

I have tried using CssClass on the tab and other items, but can't get it to work.

Please advise.  Thanks, John

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Navigations

<style>

.flex-1 {

flex: 1;

}

.top-half {

background-color: blue;

}

.bottom-half {

background-color: red;

}

</style>

<SfDialog Width="850px"

  Height="500px"

  Visible="true"

  IsModal="true">

<DialogTemplates>

<Header>Header</Header>

<Content>

<div class="d-flex flex-row h-100">

<div class="flex-1">

<SfTab>

<TabItems>

<TabItem>

<ChildContent>

<TabHeader Text="Tab 1"></TabHeader>

</ChildContent>

<ContentTemplate>

<div class="d-flex flex-column h-100">

<div class="top-half flex-1">Top half</div>

<div class="bottom-half flex-1">Bottom half</div>

</div>

</ContentTemplate>

</TabItem>

</TabItems>

</SfTab>

</div>

<div class="flex-1">

<div class="d-flex flex-column h-100">

<div class="top-half flex-1">Top half</div>

<div class="bottom-half flex-1">Bottom half</div>

</div>

</div>

</div>

</Content>

</DialogTemplates>

<DialogButtons>

<DialogButton Content="Close" IsPrimary="true" />

</DialogButtons>

</SfDialog>

@code {

}

[Satheesh Kumar Balasubramanian]

Hi John, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Flexbox not working in SfTab content" and suggest you to define height as inherit for the child div elements, which inherits the height from parent element to resolve the reported issue. For the same we have modified the sample which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/169840/ze/FlexboxIssue-810381527 

  

Index.razor:   

<style> 

    .flex-1 { 

        flex: 1; 

    } 

  

    .top-half { 

        background-color: blue; 

    } 

  

    .bottom-half { 

        background-color: red; 

    } 

  

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

        display: initial; 

    } 

</style> 

  

    <SfDialog Width="850px" 

              Height="500px" 

              Visible="true" 

              IsModal="true"> 

        <DialogTemplates> 

            <Header>Header</Header> 

            <Content> 

                <div class="d-flex flex-row h-100" style="height: inherit"> 

                    <div class="flex-1" style="height: inherit"> 

                        <SfTab Height="100%"> 

                            <TabItems> 

                                <TabItem> 

                                    <ChildContent> 

                                        <TabHeader Text="Tab 1"></TabHeader> 

                                    </ChildContent> 

                                    <ContentTemplate> 

                                        <div class="d-flex flex-column h-100"> 

                                            <div class="top-half flex-1">Top half</div> 

                                            <div class="bottom-half flex-1">Bottom half</div> 

                                        </div> 

                                    </ContentTemplate> 

                                </TabItem> 

                            </TabItems> 

                        </SfTab> 

                    </div> 

                </div> 

            </Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="Close" IsPrimary="true" /> 

        </DialogButtons> 

    </SfDialog> 

  

 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[John]

Many thanks, that is very useful.

It does seem quite hard to achieve, given that this is likely a common use case for Tab.  Is there going to be an easier way in future versions?

Thanks again, John

[Satheesh Kumar Balasubramanian]

Hi John, 

  

Thanks for your update. 

  

We have validated your reported query "Is there going to be an easier way in future versions?" and suggest you to use height as 100% for tab and it's content to resolve the reported issue. For the same we have modified the sample which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/169840/ze/FlexboxIssue318499265 

  

Index.razor:    

<style> 

    .flex-1 { 

        flex: 1; 

    } 

  

    .top-half { 

        background-color: blue; 

    } 

  

    .bottom-half { 

        background-color: red; 

    } 

  

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

        height: 100%; 

    } 

</style> 

  

    <SfDialog Width="850px" 

              Height="500px" 

              Visible="true" 

              IsModal="true"> 

        <DialogTemplates> 

            <Header>Header</Header> 

            <Content> 

                <div class="d-flex flex-row h-100"> 

                    <div class="flex-1"> 

                        <SfTab Height="100%"> 

                            <TabItems> 

                                <TabItem> 

                                    <ChildContent> 

                                        <TabHeader Text="Tab 1"></TabHeader> 

                                    </ChildContent> 

                                    <ContentTemplate> 

                                        <div class="d-flex flex-column h-100"> 

                                            <div class="top-half flex-1">Top half</div> 

                                            <div class="bottom-half flex-1">Bottom half</div> 

                                        </div> 

                                    </ContentTemplate> 

                                </TabItem> 

                            </TabItems> 

                        </SfTab> 

                    </div> 

                    <div class="flex-1"> 

                        <div class="d-flex flex-column h-100"> 

                            <div class="top-half flex-1">Top half</div> 

                            <div class="bottom-half flex-1">Bottom half</div> 

                        </div> 

                    </div> 

                </div> 

            </Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="Close" IsPrimary="true" /> 

        </DialogButtons> 

    </SfDialog> 

   

Kindly try the above sample and let us know if this meets your requirement. 

 

Regards, 

Satheesh Kumar B 

[John]

This is much better.  Many thanks, John

[Vengatesh Maniraj]

Hi John, 

You are most welcome. 

Please get back to us if you need any further assistance. 

Regards, 

Vengatesh