control cell orientation inside container

0
I would like to change the cell orientation from vertical to horizontal when displaying some attributes in a container using card style like this below. That shows vertical, I would like horizontal.There is no style option to control horizonal or vertical orientation in a treenode.I tried page-form-horizontal, which works in a dataview, but it does not affect the layout in the container. I guess maybe I need a combination of other css classes as a custom class. Can anyone show me what in their answer? I know how to make custom classes in 10.* (it seems different in 11.*). Maybe in 11.* its best for now to just provide the css lines and I will then put them in the style area in the Styling properties of the container.
asked
2 answers
1

To make your card attributes render horizontally (side by side), use a custom CSS class with modern layout techniques like Flexbox:

Add a custom class to your container

For example:


horizontal-card

Add the following CSS

Paste this into your project styling (in Mendix 10 -> theme/web/custom.css or in Mendix 11 -> styling area in the Studio Pro page inspector).


/* Root card container */
.horizontal-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

/* Individual field blocks */
.horizontal-card > .mx-text,
.horizontal-card > .mx-column,
.horizontal-card > .mx-numberinput {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 120px;
}

✔ This will render your attributes horizontally

✔ It keeps card visuals intact

✔ Works for both Mendix 10 and 11

Alternative Mendix-centric approach

If you need more control than simple CSS, you can also use:

  • Grid Layout (Rows/Columns)
  • Add columns manually and put widgets in each column to control horizontal flow.
  • List/Grid type container with horizontal orientation
  • Only if the data structure matches.

These approaches avoid needing custom CSS entirely, but are only applicable when the layout is data driven, not arbitrary static attributes.

Why not use page-form-horizontal?

page-form-horizontal is meant for forms like:


FirstName | [textbox]
LastName  | [textbox]

It aligns field labels and inputs horizontally but only in that context.

Containers and TreeNodes are layout wrappers they don’t have label/input pairs, so the class has no effect there.

answered
1

These kinds of layout issues are usually solved with CSS flexbox. The idea is simple: inside a container, labels and values are rendered vertically by default. When you turn that row into a flex container, they are displayed side by side. This is not a Mendix bug. Atlas helper classes like page-form-horizontal only work in Data View / Form contexts and do not apply to Cards or regular containers.


So the solution is either to use a Layout Grid with two columns, or to add a small piece of custom CSS. The simplest approach is to give the parent container a custom class and make the rows flexible:



/* Make label + value horizontal inside a card/container */
.card-horizontal .form-group {
 display: flex; /* stack horizontally instead of vertically */
 align-items: center;
 gap: 8px; /* space between label and value */
}

/* Label */
.card-horizontal .control-label {
 width: 40%; /* fixed label width */
 margin-bottom: 0; /* remove vertical spacing */
}

/* Value (text or input) */
.card-horizontal .form-control,
.card-horizontal .mx-text {
 flex: 1; /* take remaining space */
}
answered