Horizontal scroll bar

4
Hi, I would really like to use a horizontal scroll bar on my data grid. Id really appreciate the most simple and blatant instructions as possible as i'm fairly new at this. My grid has and needs 15+ columns the way it presents itself currently means the information in the grid cannot be read. Thank you!
asked
4 answers
24

This is accomplished in Mendix using CSS. At it's most basic level, this can be done by adding inline styles to your data grid. Look for the style property under the Common tab.

In that style property, try adding this:

width: 2000px;

I believe this should set the data grid's width to 2000 pixels (you can make this higher or lower as you need),

Next, add a Container widget, and put your datagrid inside of it. Add this style to that container:

overflow-x:scroll;

That will force a horizontal scrollbar to appear around the grid. Your search and control button pane will scroll horizontally as well, but you would need to do some more in-depth CSS to keep them locked in place.

For a more in-depth discussion on styling your Mendix app, see the resources here:

answered
2

Hi Christina,

By using css we can able to apply the scroll bar.

Create a separate class and use the below code to add the scrollbar and add the class in that grid..


display: block;
    overflow-x: auto;
    white-space: nowrap;
 

answered
0

AFAIK this isn't possible. You could try using the Datagrid Extension widget from the App Store for more controlability of your grid (if the widget is still Mx6 compatible).

answered
0

In case of list view, use two containers and add the two css properties in the outer and inner containers.

I added this in the outer container

overflow-x:scroll;
width:800px;

and

width: 2000px;

in the inner container.

answered