Data grid control bar detach from grid

Hi,   I have enabled horizontal scrolling on my data grid by adding the overflow-x:scroll; style. However, now when scrolling the buttons on the control bar remain on the left of the grid like below. Is there anyway of detaching the control bar from the grid or any alternatives to resolve this?     Thanks.
1 answers

So while not entirely sure what your question is I think you want the buttons to stay visible while scrolling?

By reading your explanation I'm assuming that you put the overflow-x: scroll on the data grid widget instead of the actual data grid content through a class.


If you inspect the elements of the datagrid on the browser you can see that you probably only want to enable horizontal scrolling on the css class “mx-grid-content”. You can do this by creating your own styling and adding styling to the mx-grid-content.

In your custom styling file you can add it like this for example:


and then add the “content-overflow-x’ as class to your data grid widget add the tab “appearance”.