Container

A generic wrapper with configurable padding, background, and border, a styling shim with no semantic baggage.

A generic styling container with configurable padding, background colour, and border radius. Use when you need a styled wrapper around a group of fields but do not want the semantic weight of Section,

Card, or Panel.

Properties

PropertyDescription
containerFluid
'fluid' | 'fixed' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
default: fluid
Bootstrap container fluidity. fluid = full width at every breakpoint; fixed = responsive max-widths at sm+; a breakpoint name is fluid below it and fixed at/above it.
containerMaxWidth
number (px)
Max-width override in px. Wins over containerFluid’s breakpoint widths.
containerMinHeight
number (px)
Minimum height in px.
containerAlign
'start' | 'center' | 'end'
default: center
Horizontal alignment of the container within its parent (margin-inline: auto for center, edge-pinned for start/end).
containerPaddingX
number (px)
default: 12
Horizontal padding.
containerPaddingY
number (px)
default: 12
Vertical padding.
containerShadow
'none' | 'sm' | 'md' | 'lg'
default: none
Shadow preset (Bootstrap shadow-*).
containerBg
'none' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'white' | 'transparent' | 'custom'
default: none
Background colour preset (Bootstrap bg-*). custom falls through to the colour-picker value.
containerTextColor
'inherit' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'muted' | 'white'
default: inherit
Text colour preset (Bootstrap text-*).

JavaScript recipes

Show or hide everything inside the container by toggling its fields

// A Container has no value of its own, drive visibility through the fields it wraps.
f365.events.onChange((e) => {
  if (e.fieldKey !== 'AccountType') return;
  const isBusiness = e.newValue === 'Business';
  ['CompanyName', 'ABN', 'TradingName'].forEach((key) => {
    const field = f365.tryField(key);
    if (field) field.visible = isBusiness;
  });
});

Reach the container element to restyle it at runtime

// Addressable only when the container carries data-f365-internal-name.
const box = f365.tryControl('SummaryBox');
const el = box?.el();
if (el) {
  el.style.borderColor = 'var(--colorBrandStroke1)';
}

Collapse a container on the display (read-only) form

f365.events.onLoad(() => {
  if (f365.context.displayMode === 'display') {
    const box = f365.tryControl('EditorTools');
    if (box) box.hidden = true;
  }
});