Need help?
Ask a question or report a problem on GitHub.
Open an issue
Layout
Windows applications are laid out by nesting containers: rows go across, columns go down, and you say how far apart things are.
put places a control
Otter
put helloButton in app put saveButton in toolbar
Controls appear in the order you put them. A window is itself a container.
Rows and columns
Put controls in a row to place them side by side, or in a column to stack them. Nest them to build any layout: a column of rows is a form; a row of columns is a set of panels.
Spacing and padding
Otter
spacing of toolbar is 8 padding of toolbar is 12
spacing is the gap between the controls inside a container. padding is the space between the container's edge and what it holds.
Alignment and spread
align says where things sit: left, center or right, and top, middle or bottom. spread pushes the children apart to fill the container, for example to put one button at each end of a toolbar.
Size
width and height are in pixels. Leave them unset and a control takes the room its content needs.
row column Controls