G Suite Business customers can preview App Maker. Ask your domain admin to apply for early access.

Page Layout

While it's possible to create a page by simply dragging and dropping widgets, layout properties can significantly speed your design. They offer immediate, precise control over your widgets' size and position.

The layout property

Panel widgets have a layout property in their main property group that defines how they arrange their child widgets. The property has three possible values:

  • Fixed: arranges child widgets in relation to the edges of the panel.
  • Horizontal: arranges child widgets next to each other, in a horizontal line.
  • Vertical: arranges child widgets on top of and beneath each other, in a vertical line.

The fixed option positions children absolutely, in reference to their parent panel. The horizontal and vertical options arrange widgets relatively, to the left and right or top and bottom of other widgets in the panel. You can think of relatively-positioned widgets as flowing with the widgets around them. In fact, widgets positioned this way are said to be in flow.

Layout properties

All widgets have a Layout property group that determines their size and position. The content of the Layout group changes based on the layout property of a widget's parent panel.

Fixed panel Layout properties

Widgets in fixed panels have Layout properties that set their size and position relative to the edges of the panel. The exact properties displayed vary based on the widget's type and your selections, but they all fall into four basic types:

Type Description Properties
Position Position properties determine how far away a widget should be from the parent widget's edges. The check boxes next to position properties disable them. If you disable the last property on an axis, App Maker automatically enables the opposite property. top, bottom, left, right
Absolute size Absolute size properties determine the widget's size, unless the corresponding automatic size property is enabled. The check boxes next to size properties disable them. If you disable an absolute size property, the widget's size is instead determined by that axis's position properties. width, height
Automatic size Automatic size properties scale a widget's size automatically based on its content. This property is only available for some widget types, and only if you haven't disabled the corresponding absolute size property. autoWidth, autoHeight
Size constraints Size constraint properties set maximum and minimum size constraints on automatically sized and disabled absolute size axes. Enter a value to set the widget's smallest or largest allowed size for a dimension. minWidth, maxWidth, minHeight, maxHeight

Flow panel Layout properties

Widgets in vertical and horizontal panels also have Layout properties that control their size and position, though the options for controlling position are much more limited than in fixed panels. Flow panel properties are arranged in two columns: horizontal and vertical. Each column controls its respective axis.

Type Description Properties
Size Size controls how the widget's size is set for the each axis. Select from fixed, fit to content, and fill parent. size
Absolute size Absolute size properties determine the widget's size when its size properties are fixed. width, height
Size constraints Constraint properties set maximum and minimum size constraints when the widget's size properties are fit to content or fill parent. minWidth, maxWidth, minHeight, maxHeight
Alignment Alignment controls the position of the non-flowing axis of the panel. It determines the widget's vertical alignment in horizontal panels and its horizontal alignment in vertical ones. align

Spacing

Use spacing to control the margin and padding of individual widgets.

Type Description Properties
Margin Defines the amount of space between a widget's edges and nearby objects on the page. margin top, margin bottom, margin left, margin right
Padding Controls the amount of space between a widget's content and its edges. padding top, padding bottom, padding left, padding right

Flow properties

Unlike fixed panels, most widget positioning in flow panels happens at the panel level. To position in-flow widgets, use the properties in the parent panel's Flow group:

Property Description
wrap This property controls how the panel arranges widgets that would otherwise be wider than its flow axis.
justify This property controls how the panel arranges widgets along its flow axis.
alignChidren This property controls how the panel arranges widgets along its non-flow axis.
wrapAlign This property controls how the panel arranges widgets that wrap, when the wrap property is enabled.

Size properties

The Size property group lists all of the size properties from the Layout group as regular properties. This lets you data bind the properties to dynamically alter their values. The properties in this group are all editable simultaneously, allowing you to potentially set conflicting values. For example, you could set the left, right, and width values to incompatible numbers. App Maker doesn't guarantee consistent behavior for conflicting size properties.

Outline

The Outline tab to the right of the canvas lets you lock or hide widgets. Locked widgets are unselectable on the canvas, preventing you from accidentally moving them. Hidden widgets aren't rendered on the canvas, allowing you to interact with widgets that would otherwise be beneath them. Hidden widgets still display in your app's run time. To reposition or edit a widget that's locked or hidden, select its name from the Outline.