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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

REACT Grid - Horizontal Scrollbar is not shown when data grid columns span out of view

Thread ID:





146581 Aug 8,2019 09:56 PM UTC Aug 12,2019 10:25 AM UTC React - EJ 2 3
Tags: Grid
Rasheed Basheer
Asked On August 8, 2019 09:56 PM UTC

REACT Grid - Horizontal Scrollbar is not shown when data grid columns span out of view. As a side effect of this, the vertical scroll bar is show off the screen as well. Also, if the user tries to scroll right by selecting a cell and clicking the right arrow key, the container layout is changed.


Since i'm using flexbox, I need a solution that is reactive to the size change of the browser window.

FYI: using chrome:


Dhivya Rajendran [Syncfusion]
Replied On August 9, 2019 01:13 PM UTC

Hi Rasheed, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and by default when apply width and height as 100 % then grid element fill its parent container and its necessary to specify the parent container width as static value. Please refer the below updated sample and documentation for more information.  


Rasheed Basheer
Replied On August 9, 2019 08:57 PM UTC

Thanks for the fast response.

Setting the parent height/width breaks the Flexbox "fill" remaining space features. 

The idea here is, if the data grid is suppose to fill the remaining space of the application, and the user changes the browser size, the grid should adjust whether the browser height or width changes to shrink or expand.

In my real world application, the top most hosting control has a display of absolute positioning. About 7 or more divs down exist the datagrid. All the divs up the hierarchy are flexbox with height and width set to 100%. Other surrounding controls (divs) have a set width and sometimes a set height, which then requires the datagrid control to be agile enough to fill in the remaining space. All other controls and grids  (by other 3rd party vendors) work fine filling in the remaining space. The only control that doesn't is syncfusion data grid.

Is there a solution to this problem that doesn't involve setting a hardcoded height/width to a parent div? 


Pavithra Subramaniyam [Syncfusion]
Replied On August 12, 2019 10:25 AM UTC

Hi Rasheed  
Thanks for your update. 
In Essential JavaScript 2, responsive Grid is rendered based on the Parent container width and height. So it is essential to set explicit height for the parent container. However we have modified the sample as grid to adapt the remaining space by setting the width as “auto”. Please refer to the below documentation link and sample link for more information. 

Sample               : https://codesandbox.io/s/holy-meadow-qrsd3 
Pavithra S. 


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