Reduce the size of columns

0
Hi experts,I have 7 columns in my data grid 2, I want to reduce the size of the columns so that all columns gets fits in a page withput any horizonatal scroll as attached in screenshot.I have set Autofit content with Set by content on all columns as also attached in screenshot.Kindly help me what need sto be done for this.
asked
2 answers
0

You can try switching from Auto-fit content to Auto-fill and enable wrapping.


With Auto-fill, the grid distributes the available space across columns, and when you turn on text wrapping, the content will move to the next line instead of expanding the column width. This helps prevent horizontal scrolling while still keeping all columns visible.


This way, you can fit all columns into the page and still display their content without forcing a scroll.


If this resolves your issue, please mark it as accepted.


answered
0

Hi,


In Data Grid 2, this issue comes because you are using:

Column width → Set by content

This will always expand columns based on data, so horizontal scroll is unavoidable. There is no setting in Data Grid 2 that will auto-fit all columns into the page if content is wide.

Below is the correct working approach used in real Mendix projects.

1. Do NOT use “Set by content”

Change all columns:

Column width → Fixed

Give proper widths manually:

Example:

Column 1 → 120px  
Column 2 → 120px  
Column 3 → 140px  
Column 4 → 140px  
Column 5 → 150px  
Column 6 → 120px  
Column 7 → 120px

Total should roughly fit within screen (~1000–1200px).

2. Use “Auto fill” correctly

Pick 1 or 2 columns and set:

Auto fill = Yes

Keep remaining columns as fixed.

This ensures grid fills available space without overflow.

3. Reduce column content size

If content is large, column will still stretch.

Do this:

  • Shorten column headers
  • Format values (e.g., date → short format)
  • Avoid long text fields

4. Apply CSS to prevent expansion

Add this in your theme:

.mx-datagrid2 .mx-datagrid2-cell,
.mx-datagrid2 .mx-datagrid2-head-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

This is very important — it prevents text from forcing column expansion.

5. Set page to full width

Check your page layout:

Container → Width = Full width

If your page is inside a small layout grid (like 6 columns), grid will shrink.

6. Use Compact density

In Data Grid 2:

Density → Compact

This reduces padding and helps fit more columns.

  • Data Grid 2 does not auto-fit all columns dynamically
  • You must control width manually
  • Horizontal scroll cannot be fully avoided if content is large
  • Fixed widths for all columns
  • 1 Auto fill column
  • CSS for ellipsis
  • Compact density
  • Full width container


answered