Question

Layout of datagrid with scroll bar

3

Hi, I was kindly given a solution to adding a horizontal scroll bar to my datagrid. (Adding overflow-x:scroll; to the container style and width:2000px; to the grid style) This works great however it centers the search fields and understandably makes you scroll to see all of them ( I have lots). Can i split the datagrid in anyway to prevent this? I would like all the search fields to be visible at once without the need to scroll. Thanks Christina

asked 2016-02-23

Christina Faulkner

2 answers

4

It is possible when you style deeper in the Mendix structure.

In example: give the mx-grid-content the scroll overflow. and give mx-templategrid-content-wrapper (which is a few levels deeper) a max-width and width.

answered 2016-02-23

Rob Duits

Allard Brand · Accepted Answer · 2016-02-24

To add the horizontal scrollbar to the datagrid you could add the following CSS to your custom.css stylesheet, and add the class 'scroll-horizontal' to the datagrid where you want to apply the horizontal scrollbar. This will keep the positioning of the search fields, control bar, and paging buttons.

.scroll-horizontal .mx-grid-content {
    overflow-x: scroll;
}

.scroll-horizontal .mx-datagrid-content-wrapper {
    width: 2000px;
}