Resizing

Each Dockview instance contains groups and each group contains panels. Panels are sized indirectly through the group that contains them, so resizing a panel really means resizing the group it lives in. You can drive either from code (set a height and width, or observe dimension changes), and both approaches achieve the same result.

Resizing a panel

Logically a user may want to resize a panel, but this translates to resizing the group which contains that panel. The panel API mirrors the group's resize methods, so you can set a panel's height and width (or observe dimension changes) without reaching for the group directly.

height	The panel height in pixels readonly height: number
onDidDimensionsChange	readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>
width	The panel width in pixels readonly width: number
setSize	setSize(event: SizeEvent): void

Set the size of a panel using props.api.setSize(...).

// it's mandatory to provide either a height or a width, providing both is optional
props.api.setSize({
    height: 100,
    width: 200,
});

Resizing a group

You can also resize a group directly by setting its height, width, or both. Because every panel lives inside a group, this is the same operation the panel API delegates to. Reaching for the group from a panel is possible but not recommended due to the clunky syntax.

height	The panel height in pixels readonly height: number
onDidDimensionsChange	readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>
width	The panel width in pixels readonly width: number
setSize	setSize(event: SizeEvent): void

// you could also resize the panel's group, although not recommended it achieves the same result
props.api.group.api.setSize({
    height: 100,
    width: 200,
});

You can see an example invoking both approaches below.

See also

• Adding panels: set initialWidth/initialHeight and minimum/maximum size constraints when creating a panel.
• Constraints: set minimum and maximum group sizes.
• Sizing and layout: control initial and proportional sizing.
• Panel API: the panel API surface that exposes setSize, height, width and onDidDimensionsChange.