Grid table is blocking over div Top row when scrolling down.

[MaTaO]

Hello,

      I face the problem where the UI of Grid data table (search section and so on when scrolling more) is blocking the Top row div which include my profile data and logout button when scrolling down as you can see in the first picture below.

      The second image is normal homepage where I append text to get lines for scrolling and it displays the Top row div correctly.
     <ItemGroup>

<PackageReference Include="Syncfusion.EJ2.Blazor" Version="17.3.0.10-beta" />

</ItemGroup>

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.10/fabric.css" rel="stylesheet" />

<script src="https://cdn.syncfusion.com/ej2/17.3.10/dist/ej2.min.js"></script>

<script src="https://cdn.syncfusion.com/ej2/17.3.10/dist/ejs.interop.min.js"></script>

     Above is the package I am using and referencing.

     
Thanks,
Passakorn

[Renjith Singh Rajendran]

Hi MFEC, 

Thanks for contacting Syncfusion support. 

We have analyzed the screenshot which you have shared with us. We have tried with a Blazor App to reproduce the problem. But Grid renders fine in the blazor app. We are attaching the sample which we have tried from our side for your convenience. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest-784446882 

We suspect that the problem is with the layout you are using in your app. So we suggest you to check the custom styles which you have applied to your app. And modify those styles to achieve a proper layout to your application. 

We suggest you to refer to the below documentation for more details on rendering responsive Grid inside a parent container. 

Documentation : https://ej2.syncfusion.com/blazor/documentation/grid/scrolling/#responsive-with-parent-container 

 

If you are still facing difficulties in achieving your requirement. We need more details to further proceed on this and provide you a solution as early as possible. Please share with us the following details for better assistance. 

1. Share the sample app which you have tried from your side.
2. Or reproduce the problem with the attached sample and share with us.
3. Share the details about the custom styles you are using.
4. Share with us the video demo showing the problem.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran. 

[MaTaO]

Hi Renjith,

What I did was just download the sample and run it without edit anything but it still blocks the top row div as you can see in the image T^T.
My IDE is VS 2019 Enterprise (Windows) with the latest version (16.3.1) debug without IIS browse on google chrome Version 77.0.3865.90 (Official Build) (64-bit).

Regards,

Passakorn

[Renjith Singh Rajendran]

Hi MaTaO, 

Thanks for your update. 

We have analyzed your query. We suggest you to set the z-index for the div elements as like the below code to achieve your requirement. As based on the application layout, the div element containing the Grid overlaps the sticky positioned div element. So you need to set the stack level by using the “z-index” property to make the Grid hide under the sticky div element. Please use the code below, 

[MainLayout.razor] 

 

<div class="main"> 

    <div class="top-row px-4" style="z-index:2;">                    /*set a higher z-index as 2 for the sticky positioned div*/ 

        <a rel='nofollow' href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a> 

    </div> 

 

    <div class="content px-4" style="z-index:1;">                    /*set a lower z-index as 1 for the div which contain Grid*/ 

        @Body                                                        /*Grid will be rendered here*/ 

    </div> 

</div> 

We have modified the sample based on this requirement. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SynfusionTest1285985169 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[MaTaO]

Hello Renjith,

Thank you very much. such a simple solution, silly me (╯°□°）╯︵ ┻━┻

Regards,

MaTaO

[Vignesh Natarajan]

Hi MaTaO,  

Thanks for the acknowledgement.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan.