Resizable panels

The builder uses two QSplitter separators to resize the catalogue on the left and the properties panel on the right. The central canvas keeps a protected minimum width so editing remains usable when the builder is embedded in another application.

Usage

Drag the vertical handle between a panel and the canvas. Each handle is also keyboard accessible:

• Arrow Left and Arrow Right change the width by 12 px;
• Shift increases the step to 32 px;
• Home applies the minimum width;
• End applies the maximum available width.

Default limits are 220–520 px on the left and 280–680 px on the right. The responsive resolver fits the requested widths around the protected canvas and switches to overlay panels when the container becomes too narrow.

Persistence

Widths are stored by default through Quasar’s object-safe LocalStorage API, backed by browser localStorage, under:

qform-builder:<builderId>:panel-widths

Persistence can be disabled or isolated:

<FormBuilder
  :panel-widths-autosave="false"
  panel-widths-storage-key="dsi:forms:panel-widths"
/>

Host control

<FormBuilder
  v-model:left-panel-width="leftWidth"
  v-model:right-panel-width="rightWidth"
  @panel-resize="saveUserLayout"
/>

The public API can read, update or reset the layout:

builder.value?.getPanelWidths()
builder.value?.setPanelWidths({ left: 360, right: 480 })
builder.value?.resetPanelWidths()

Splitters are not interactive in readonly or disabled mode. On compact containers the drawers remain available as overlays, and persisted widths never force horizontal overflow.