Documentation:PlacingContainer

The PlacingContainer is a way to organize a view based on the box-in-box principle, in contrast to the default way of placing components on a ViewModel in a Grid pattern with x and y coordinates.

The web browser FlexBox has been used for most of how the Placing containers work.

When using the web renderer (for example, in TurnKey), the output from the framework will be HTML with flexbox CSS for layout. In the designer and a WPF application, you're using MDriven's implementation of a flexbox renderer.

PlacingContainers are introduced in this blog article: https://blog.mdriven.net/placingcontainers-flexbox/

Notes for when you're confused by why you're seeing when working with placing containers (flexbox)

Why isn't this container filling (becoming the same width of) the container above?

If you haven't made any special settings, it's probably because a container only "fills" the container above in a perpendicular direction. If you want it to fill the whole width, for example, for a table, make its direction "Column".

• Direction Column => Fills horizontally and stacks vertically
• Direction Row => Fills vertically and stacks horizontally

I want to make a table with one fixed-width column and the rest with a flexible width

In the table, the goal is to have the images in a fixed size, and the right takes up the rest of the page width. It is important to know that there's no way in containers/flexbox to make rows aware of each other, so the image size needs to be fixed or at least, fixed for a screen size range. Use CSS media queries to make them different depending on the screen size.

ViewModel;

The main thing to understand here is that you need to set:

• Imagecolumn to Grow = 0
• Fieldcolumn to Grow = 1

This makes the field column fill the remaining space horizontally.

You can control how large the columns will be on the column itself using Self-align (X-direction).