DevExtreme React - Component Content is not Scrollable
This topic describes issues related to scrollable content in various components: DataGrid, TreeList, Scheduler, Form, ScrollView, Popup, and others. The following issues may occur:
- A component displays only part of its content and has no scrollbar.
- You can scroll down the entire page but the component is not scrollable.
- Height is
100%
but the component does not fit into the page. - Scrolling API does not work. For example, DataGrid does not navigate to the required row when you call navigateToRow or use autoNavigateToFocusedRow.
- A component displays a scrollbar but elements below the component overlap the component content.
If information below does not resolve your scrolling-related issue, create a ticket in our Support Center and describe your scenario in detail: Create a ticket.
Component Displays Only a Part of the Content
Sometimes a component displays only part of its content and has no scrollbar. The following can be possible reasons:
- A parent element sets a fixed height and
overflow: hidden
. - The component height is
auto
.
For example, put a DataGrid into a Popup. The DataGrid's default height value is auto
. This means that the component automatically adjusts its height to accommodate all rows and does not display a scrollbar.
To resolve the issue, set the component height to 100%
.
The Page is Scrollable, the Component is Not
If your component does not display a scrollbar while you can scroll the page or the parent element, check the following conditions:
- None of the component parents in DOM have a fixed height.
- The component height is
auto
.
The image below shows DataGrid in Popup, but scrolling is enabled in Popup and not in DataGrid.
To resolve the issue, do one of the following:
- Set a fixed height for the component.
- Set the component height to 100%
and a fixed height for one of the component parent elements.
Component Height is 100% But It Does Not Fit Into the Page
This situation usually occurs when none of parent elements has a fixed height. For example, on the image below DataGrid does not fit the page. Page scrollbar appears.
If a parent element sets a relative height, one of its parents should set a fixed height.
If you want to fill up the entire vertical space and cannot use fixed heights, set 100%
height for all parents up to <html>
.
Scrolling Methods Do Not Work
If the component's height is not limited, the component occupies the entire space in its parent element, and scrolling methods may not work correctly. To resolve the issue, limit the component's height. For example, set a fixed height either for the component or for one of its parent elements.
Scrollbar is Displayed but Component is Overlapped
Sometimes a scrollbar is available, but elements below the component overlap component content. For example, this issue may occur if you place a component between a header and a footer with fixed heights.
To resolve the issue, assign a function to the component height property to calculate the required height. Alternatively, use CSS calc function in the height rule.
If you have technical questions, please create a support ticket in the DevExpress Support Center.