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

DataGrid in Popup with no 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.

DataGrid in Popup with a native scrollbar

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.

DataGrid exceeds the page

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.