Skip to main content

Sizing and layout

Auto-resizing​

By default, Dockview uses a ResizeObserver to automatically detect when the container element changes size and updates the layout accordingly. This requires no configuration.

If you need to manage sizing yourself, for example when embedding Dockview inside a container that doesn't produce ResizeObserver notifications, you can disable auto-resizing and call api.layout() manually.

// Disable the internal ResizeObserver
disableAutoResizing={true}

// Then manually drive layout updates:
api.layout(width, height);

You can read the current dimensions at any time via api.width and api.height.

Proportional layout​

When the container is resized, Dockview shares the extra (or missing) space out between the groups of each row and column proportionally, so every group keeps its share of the layout.

Set proportionalLayout={false} to hand the whole delta to the last group in each row/column instead. Every splitter but the last one then stays exactly where the user left it, which is how VS Code behaves. If the last group reaches its minimum or maximum size, the remainder moves on to the group before it. This applies to the nested layouts inside floating and popout windows too.

proportionalLayout={false}

The option can also be changed after initialization with api.updateOptions({ proportionalLayout }). Re-enabling it adopts the group sizes in place at that moment as the proportions to preserve, rather than the proportions from before it was disabled. Passing undefined restores the default.

Sizing groups after a drop​

By default, dropping a panel or group on another group's edge splits the target group in half. The other groups in that row or column keep their sizes. Moving a whole group within the same row or column preserves the existing group sizes.

Set dropSizing to 'distribute' to share the row or column evenly after the drop instead. Minimum and maximum size constraints still apply. This is useful for workspaces that keep their panes equally sized as users rearrange them.

Change it at runtime with api.updateOptions({ dropSizing: 'distribute' }). The change applies to subsequent drops; it does not resize the current layout. Use 'split' or undefined to restore the default. This option does not change how programmatic addPanel calls size groups.

Hiding borders​

By default, Dockview renders thin borders between groups in the grid. The hideBorders option removes them. See Hiding borders on the theming page for the full example.

Updating options at runtime​

api.updateOptions() lets you change any option after the component has initialized. Only the provided keys are updated; others remain unchanged.

api.updateOptions({
    hideBorders: true,
    locked: false,
    theme: themeLight,
});

See also​

  • Resizing: set a panel or group's exact height and width programmatically
  • Constraints: set minimum and maximum group sizes