Issue with the scrollbar when Tabs is inside the Dialog

[Antonio Martino]

I don't know how to fix this, The context of the tabitem needs is own scrollbar and the context of the dialog should not get the scrollbar.

How to fix this, i know this is a style issue, please can anyone tell me how to do this?

        <SfDialog @bind-Visible="isVisible" Width="500px" IsModal="true" ShowCloseIcon="true">

            <DialogTemplates>

                <Header> Test Scroll </Header>

                <Content>

                    <SfTab>

                        <TabItems>

                            <TabItem>

                                <ChildContent>

                                    <TabHeader Text="Contacts"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <div class="newscroller">

                                        @for (int i = 0; i < 20; i++)

                                        {

                                            <div class="form-row">

                                                <div class="form-group">

                                                    <label class="e-float-text e-label-top">Item @i</label>

                                                    <SfTextBox Readonly="true"></SfTextBox>

                                                </div>

                                            </div>

                                        }

                                    </div>

                                </ContentTemplate>

                            </TabItem>

                            <TabItem>

                                <ChildContent>

                                    <TabHeader Text="Leads"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <div class="newscroller">

                                        @for (int i = 0; i < 10; i++)

                                        {

                                            <div class="form-row">

                                                <div class="form-group">

                                                    <label class="e-float-text e-label-top">Item @i</label>

                                                    <SfTextBox Readonly="true"></SfTextBox>

                                                </div>

                                            </div>

                                        }

                                    </div>

                                </ContentTemplate>

                            </TabItem>

                        </TabItems>

                    </SfTab>

                </Content>

            </DialogTemplates>

        </SfDialog>

<style>

    newscroller {

        height: calc(100vh - 20rem) !important;

        overflow-y: auto;

        width: 100% !important;

        justify-content: space-between;

        display: flex !important;

    }

Attachment: SyncfusionBlazorApp_931ec6c.zip

[Kokila Poovendran]

Hi Antonio Martino,

Greetings from Syncfusion support!

We have reviewed your requirement and have prepared a sample that meets your needs. Please find the code snippet: below:

<SfDialog @bind-Visible="isVisible" Width="500px" Height="400px" IsModal="true" ShowCloseIcon="true">

         .

         .

         .

         <ContentTemplate>

              <div class="newscroller">

                                   .

                                   .

                               </div>

        </ContentTemplate>

</SfDialog>

 

<style>

    .newscroller {

        height: 300px;

        overflow-y: auto;

    }

 

    .e-dialog .e-dlg-content{

        overflow: hidden;

    }

</style>

 

By applying these style changes, the scrollbar will render based on the tab context. Please implement these changes on your end and let us know if you encounter any further issues.

For your reference, we have also attached a sample screenshot below:

Regards,
Kokila Poovendran

[Antonio Martino]

Thank you for your answer.

I would have gotten it right that way, but you set a fixed height and that is not what I want.

I want the dialog to be 80% of the height of the main window.

This is how I solved this now.

However, this does not work if you have a tab within a tab.

I continue to find this really difficult, I don't have a good control over this.

Attachment: SyncfusionBlazorApp_5e8bb43d.zip

[Kokila Poovendran]

Hi Antonio Martino,

Thank you for reaching out to us with your concerns. We understand that achieving the desired dialog height within nested tabs can be challenging. We've prepared a code snippet based on your requirements. Please find the attached sample code below:

Code snippet:

<SfDialog @bind-Visible="isVisible" Width="500px" IsModal="true" ShowCloseIcon="true" Height="80%">

    <DialogTemplates>

        <Header> Test Scroll </Header>

        <Content>

            <SfTab Height="calc(100% - 20px)">

                <TabItems>

                    <TabItem>

                        <ChildContent>

                            <TabHeader Text="Contacts"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

 

                            <div class="tab-content">

                                @for (int i = 0; i < 20; i++)

                                {

                                    <div class="form-row">

                                        <div class="form-group">

                                            <label class="e-float-text e-label-top">Item @i</label>

                                            <SfTextBox Readonly="true"></SfTextBox>

                                        </div>

                                    </div>

                                }

                                <SfTab Height="400px">

                                     <TabItems>

                                        <TabItem>

                                            <ChildContent>

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

                                            </ChildContent>

                                             <ContentTemplate>

                                                <div class="tab-content">

                                                @for (int i = 0; i < 20; i++)

                                                {

                                                    <div class="form-row">

                                                        <div class="form-group">

                                                            <label class="e-float-text e-label-top">Item @i</label>

                                                            <SfTextBox Readonly="true"></SfTextBox>

                                                        </div>

                                                    </div>

                                                }

                                                </div>

                                             </ContentTemplate>

                                        </TabItem>

                                        <TabItem>

                                            <ChildContent>

                                                <TabHeader Text="Second Nested Tab"></TabHeader>

                                            </ChildContent>

                                            <ContentTemplate>

                                                <div class="tab-content">

                                                @for (int i = 0; i < 20; i++)

                                                {

                                                    <div class="form-row">

                                                        <div class="form-group">

                                                            <label class="e-float-text e-label-top">Item @i</label>

                                                            <SfTextBox Readonly="true"></SfTextBox>

                                                        </div>

                                                    </div>

                                                }

                                                </div>

                                            </ContentTemplate>

                                        </TabItem>

                                      </TabItems>

                                </SfTab>

                            </div>

                        </ContentTemplate>

                    </TabItem>

                    <TabItem>

                        <ChildContent>

                            <TabHeader Text="Leads"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

                            <div class="tab-content">

                                @for (int i = 0; i < 10; i++)

                                {

                                    <div class="form-row">

                                        <div class="form-group">

                                            <label class="e-float-text e-label-top">Item @i</label>

                                            <SfTextBox Readonly="true"></SfTextBox>

                                        </div>

                                    </div>

                                }

                            </div>

                        </ContentTemplate>

                    </TabItem>

                </TabItems>

            </SfTab>

        </Content>

    </DialogTemplates>

</SfDialog>

Please review the code, and if there are any further adjustments needed or if we've misunderstood your requirements, feel free to modify the sample accordingly. We are here to assist you further.

Regards,

Kokila Poovendran.

Attachment: SyncfusionBlazorApp_fc2f512d.zip