Skip to content

autoPlacement

autoPlacement() chooses the placement that has the most space available automatically.

You’ll want to use this instead of flip() if you don't want to give the floating element a “preferred” placement and let it choose a placement for you.

Scroll the container

In the above example, the automatic “most space” strategy is demonstrated (in contrast to flip’s preferred + fallback “no space” one).

Usage

import {computePosition, autoPlacement} from '@floating-ui/dom';
 
computePosition(referenceEl, floatingEl, {
  middleware: [autoPlacement()],
});

This cannot be used with flip().

Options

These are the options you can pass to autoPlacement().

interface Options extends DetectOverflowOptions {
  alignment?: Alignment | null;
  autoAlignment?: boolean;
  allowedPlacements?: Array<Placement>;
}

alignment

default: null

Without options, autoPlacement() will choose any of the Side placements which fit best, i.e. 'top', 'right', 'bottom', or 'left'.

By specifying an alignment, it will choose those aligned placements.

autoPlacement({
  // top-start, right-start, bottom-start, left-start
  alignment: 'start',
});

autoAlignment

default: true

When alignment is specified, this describes whether to automatically choose placements with the opposite alignment if they fit better.

autoPlacement({
  alignment: 'start',
  // Won't also choose 'end' alignments if those fit better
  autoAlignment: false,
});

allowedPlacements

default: computed subset of ALL_PLACEMENTS

Describes the placements which are allowed to be chosen.

autoPlacement({
  // 'right' and 'left' won't be chosen
  allowedPlacements: ['top', 'bottom'],
});

...detectOverflowOptions

All of detectOverflow's options can be passed. For instance:

autoPlacement({padding: 5}); // 0 by default