Skip to content

Fixed, Resizable and Reflowable elements

Joel de Guzman edited this page Mar 3, 2020 · 3 revisions

So in summary, here are the rules:

  • A window is resizable, only if its main content element is resizable
  • An element is resizable if its has a limit with (min < max) in either x or y dimension
  • If you place a big, fixed-sized element inside a scrollable port:
    • The child element still has a fixed size.
    • The scrollable port is always resizable where:
      • The port's max limits is the child element's max limits in either x or y dimension. Therefore, the window cannot resize larger than the child element's size.

These rules are also followed by all reflowable elements such as the tiles. So you prabably understand now why I said that the tiles are best for placing UI elements in a window. Which leads me to add another reason why it does not make sense to place reflowable elements inside a scrollable viewport:

  • When a resizable element is placed in a scrollable port, it will always assume its min limits in both the x or y dimension. So in other words, resizable elements inside scrollable ports become fixed-sized.

When a reflowable is placed inside a scrollable port, it is best to give it a fixed size, using the fixed_size element.

Examples of reflowable/resizable elements:

  • Tiles
  • Aligns
  • Layers
  • vsize (resizable in the x direction only, fixed in the y dimension)
  • hsize (resizable in the y direction only, fixed in the x dimension)
  • Margins
  • A reflowable element is a resizable element that automatically repositions and changes the layouts of its enclosed elements when the size of its parent element or the main window (if it is the main content) changes, constrained by the min and max limits of its children elements.
  • Reflowable/resizable elements assume the reflowability/resizability of its child element(s)) in both x and y dimensions.
Clone this wiki locally