Size differences in tables

0
Hi, how can I automatically expand table heights when the next one (or any of from the same row) has more height? I tried to toggle "Compact" but it didn't work for this kind of problem, I would really appreciate it if you could help me! :)
asked
2 answers
1

Hi Yunus,

 

Please refer the below similar communications may be it's helpful,

https://community.mendix.com/link/space/ui-&-front-end/questions/124867

https://community.mendix.com/link/space/user-experience/questions/97411

 

Hope it helps!

Thanks & Regards,

Manikandan K

answered
0

Asking this: "I have a table in a Mendix web-application, where each table-cell contains element-x, who's content can differ in length. How can I make sure that the height of element-x is the same for each element-x that is on the same row?" here is the answer of our great friend ChatGPT:

To ensure that the height of element-x is the same for each element within the same row in your Mendix web application, even when their content differs in length, you can use CSS Flexbox or CSS Grid to manage the layout and handle row alignment. Here's how you can do it:
Option 1: Using CSS Flexbox

    Define a Flexbox container for the row:
        You can apply display: flex to the row container that holds element-x elements.

    Ensure elements have equal height:
        Use align-items: stretch on the flex container to ensure that all children (your element-x elements) in the same row stretch to the same height.

Here’s an example:

css

.table-row {
  display: flex;
  align-items: stretch;
}

.element-x {
  flex: 1;
  /* Add additional styling as needed */
}

Option 2: Using CSS Grid

    Define a Grid container for the row:
        You can apply display: grid to the row container.

    Ensure elements have equal height:
        By default, grid items will stretch to the full height of the row unless you specify otherwise. This approach gives you a bit more control over the layout, especially when handling different column widths.

Here’s an example:

css

.table-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: auto;
}

.element-x {
  /* Add additional styling as needed */
}

Mendix-Specific Application:

You can add custom classes to your rows and elements in the Appearance tab within Mendix, then apply the CSS rules above in your project's theme files.

With either approach, the element-x in each row will have the same height regardless of the content length.

For a better more readable layout of the answer see: https://chatgpt.com/c/67151a53-ae58-8003-9aa7-1a8e037d7257

answered