How to prevent page scolling inside the tab

[KINS]

I have blazor web applications which contains Header bar (in first row) and I have used Tab in second row for page navigation.It works fine as per my requirement but I would like to know how to prevent page scolling when I use component inside the Tab control. 

[Satheesh Kumar Balasubramanian]

Hi KINS, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "How to prevent page scrolling inside the tab" and suspect that you have defined specific height for tab component. We suggest you to set 100% for tab Height property to prevent page scrolling. For the same we have prepared the sample which can be downloaded from the following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/168603/ze/PreventScrolling-420436286 

  

 Index.razor:     

<SfTab Height="100%"> 

    <TabItems> 

        <TabItem> 

            <HeaderTemplate>Grid</HeaderTemplate> 

            <ContentTemplate> 

             .................................................... 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible. 

• Replicate the issue in above sample or share issue replicating sample if possible
• Image depicting the issue
• Share all tab related code snippets
  

Regards,

Satheesh Kumar B

[KINS]

Thanks for reply..

Please check the below screencast and check my exact requirements..

https://www.screencast.com/t/Qv89JXqmCutg

[Satheesh Kumar Balasubramanian]

Hi KINS, 

  

Thanks for your update. 

  

We have validated your reported query and let you know that scroller is added to the page when the content exceeds the page. If you still want to prevent page scrolling, you can give specific height to grid component which will set scroller to grid content not for whole page. For the same we have modified the sample which can be downloaded from the following. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/168603/ze/PreventScrolling-1736534266 

  

Index.razor:      

<SfTab Height="100%"> 

    <TabItems> 

        <TabItem> 

            <HeaderTemplate>Grid</HeaderTemplate> 

            <ContentTemplate> 

                <SfGrid DataSource="@Orders" Height="500px"> 

                 ...................................... 

                </SfGrid> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

 

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

  

Regards, 

Satheesh Kumar B 

[KINS]

thanks working fine

but how to set height as dynamically

[Balasubramanian Sattanathan]

Hi KINS, 

Thanks for the update. 

We have analyzed your requirement and suspect that your need is to change the height of the SfGrid dynamically. You can change the height of the SfGrid component dynamically by defining the height property as two-way binding. If you have used any other components inside the Tab, you can change the component’s height dynamically like below code snippet. We have modified the sample for your reference and which can be available from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/168603/ze/TabComponent1988352746.zip 

 

<SfButton Content="Change Height" OnClick="OnHeightChange"></SfButton> 

 

<SfTab Height="100%"> 

    <TabItems> 

        <TabItem> 

            <HeaderTemplate>Grid</HeaderTemplate> 

            <ContentTemplate> 

                <SfGrid DataSource="@Orders" @bind-Height=@GridHeight> 

                    . . . 

                </SfGrid> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

 

<style> 

    .e-tab > .e-content { 

        overflow-y: auto; 

    } 

</style> 

 

@code { 

    public string GridHeight = "500px"; 

    . . . 

    public async Task OnHeightChange() 

    { 

        GridHeight = "300px"; 

    } 

    . . . 

} 

 

Kindly refer to the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S