`<sideBySide>`

Renders children in a side-by-side horizontal layout

<sideBySide> is a Sectional component that takes enclosed sectional components and renders them in a side-by-side horizontal format.

Attributes and Properties

Attributes for `<sideBySide>`

Other (5)

margins

[ _componentSizeList ]. Two margin widths applied to every panel: the first on the panel's leading side and the second on its trailing side, following the writing direction.

valign

keyword. Default vertical alignment for all panels.

Value	Description
`top`	Align panels to the top.
`middle`	Vertically center panels.
`bottom`	Align panels to the bottom.

valigns

[ keyword ]. Per-panel vertical alignment values.

Value	Description
`top`	Align the panel to the top.
`middle`	Vertically center the panel.
`bottom`	Align the panel to the bottom.

width

componentSize. Total rendered width of the side-by-side container.

widths

[ _componentSizeList ]. List of widths for each panel.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<sideBySide name="s">`

Other (9)

$s.absoluteMeasurements

boolean. Whether children's widths are interpreted in absolute units.

$s.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$s.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$s.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$s.gapWidth

number. The gap width between panels as a percentage of the total container width.

$s.hidden

boolean. Whether this component is hidden from the rendered output.

$s.margins

[ number ]. Margins between adjacent children.

$s.valigns

[ text ]. Vertical alignment of each child.

$s.widths

[ number ]. The list of child widths.

Common to all components (4)

$s.doenetML

text. The DoenetML source code that produced this component.

$s.hide

boolean. Whether to hide this component from the rendered output.

$s.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$s.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Default `<sideBySide>`

Three examples of different components placed in a <sideBySide> are illustrated. By default, portions are assigned an equal percentage width, with no margin. These settings can be modified with the widths and margins attributes.

Attribute Examples

Attribute Example: widths

The widths attribute assigns a width to each side-by-side portion by percent.

Attribute Example: margins

The margins attribute assigns a margin between each side-by-side portion by percent. When widths and margins attributes are both applied, margins are applied first.

shuffle sign

<sideBySide>