Data Grid 2 suddenly changed layout - any ideas?

0
Hi everyone,I'm running into a really strange issue and I'm not sure what's causing it.I haven't touched this project for about 2 months, and today I opened it again to continue working on it. I didn't upgrade Mendix or intentionally change any widgets or settings.The strange thing is that all my Data Grid 2 widgets have changed their layout.In Structure Mode, everything looks correct and the Data Grid is displayed as a normal table.But in Design Mode and also when I run the app, all the columns are stacked vertically instead of showing as a table.I already tried:Creating a brand new Data Grid 2Creating a new test pageCleaning the deployment directoryChecking my custom CSSInspecting the HTML/CSS in DevToolsThe issue still happens.What makes it even stranger is that I have another project using the same Mendix version and Data Grid 2, and that project works perfectly. So it seems to be something specific to this project.Has anyone seen this before or have any ideas what could cause this?
asked
2 answers
0

Hi Varisa,


If the Data Grid 2 suddenly renders correctly in Design Mode but all columns are stacked vertically at runtime, while creating a new Data Grid 2 and clearing CSS did not help, I would focus on the compiled theme/CSS being loaded at runtime rather than the Data Grid configuration itself.

A couple of things I would check:


  1. Check theme/settings.json
  2. If you're using an older Atlas version, make sure the compiled theme is included:

"cssFiles": [
    "styles/web/css/main.css",
    "theme.compiled.css"
]

Mendix specifically mentions this in the Data Grid 2 troubleshooting section for Atlas v2.x.

  1. Compare the generated HTML/CSS with your working project
  2. Since the same Mendix version + Data Grid 2 works correctly in another project, that's a strong indication that something project-specific is affecting the runtime CSS.
  3. In DevTools, inspect:
.widget-datagrid-grid
.widget-datagrid-grid-head
.widget-datagrid-grid-body

Compare their computed display, grid-template-columns, and related CSS between the working and broken projects.

  1. Check the Atlas/UI module versions
  2. Make sure the broken project isn't carrying an older Data Widgets/Atlas dependency after a previous upgrade. The current Data Grid 2 is part of the Data Widgets module, so I'd also compare the Data Widgets version between the two projects.
  3. Check for CSS loaded from another module
  4. Even if your own custom CSS is empty, a module can still introduce CSS that overrides Data Grid 2 styles. In DevTools, click the computed property and check which CSS file is providing/overriding it.

Since Data Grid 2 uses a grid-based layout for its rows and columns, if those runtime styles are missing or overridden, the cells can end up appearing vertically instead of as a table.


Given that you've already tried a fresh Data Grid 2, new test page, clean CSS, and DevTools, I'd compare the working and broken project's generated theme.compiled.css and the Data Widgets/Atlas versions next. That should narrow this down much faster than recreating the grid again.


Hope this helps.

answered
0

One thing I'd verify is whether the browser is actually loading the DG2 stylesheet.

Open DevTools, inspect a row or cell, and check if classes like widget-datagrid-grid have the expected grid-related styles applied. If the classes exist but the corresponding CSS rules are missing, that usually points to a theme compilation or stylesheet loading issue rather than a Data Grid 2 configuration problem.

I've also seen this happen after pulling an older branch where files under theme/ were out of sync. In that case, running a full theme rebuild (npm install followed by a deployment directory clean and restart) resolved it.

Since even a brand new Data Grid 2 on a new page shows the same behavior, I would focus on project-level styling and theme assets rather than the widget itself.


answered