We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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


5 Replies

RS Renjith Singh Rajendran Syncfusion Team September 27, 2019 09:19 AM UTC

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, 

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. 
 
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. 



MA MaTaO September 27, 2019 11:15 AM UTC

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



RS Renjith Singh Rajendran Syncfusion Team September 30, 2019 09:52 AM UTC

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, 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



MA MaTaO October 7, 2019 07:58 AM UTC

Hello Renjith,

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

Regards,
MaTaO


VN Vignesh Natarajan Syncfusion Team October 8, 2019 04:33 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon