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

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

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.

Example:

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

FYI: using chrome:

Thanks


3 Replies

DR Dhivya Rajendran Syncfusion Team August 9, 2019 05:13 AM


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.  



Regards, 
R.Dhivya 



RB Rasheed Basheer August 9, 2019 12:57 PM

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? 

Thanks



PS Pavithra Subramaniyam Syncfusion Team August 12, 2019 02:25 AM

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 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon