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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147873 Sep 26,2019 12:55 PM UTC Oct 8,2019 04:33 AM UTC Blazor 5
loading
Tags: Grid
MaTaO
Asked On September 26, 2019 12:55 PM UTC

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 [Syncfusion]
Replied On 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. 


MaTaO
Replied On 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


Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


MaTaO
Replied On October 7, 2019 07:58 AM UTC

Hello Renjith,

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

Regards,
MaTaO

Vignesh Natarajan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon