size

A visibility optimizer and data provider that allows you to change the size of the floating element.

Scroll the container

Floating

This is useful for long dropdowns that become scrollable without specifying a fixed height, or matching the floating element’s width with its reference element.

Usage

If your floating element’s content cannot be resized such as in the example, you can make the floating element scrollable with overflow: scrolloverflow: scroll (or autoauto). Ensure your CSS is using box-sizing: border-boxbox-sizing: border-box!

import {computePosition, size} from '@floating-ui/dom';
 
computePosition(referenceEl, floatingEl, {
  middleware: [
    size({
      apply({availableWidth, availableHeight, elements}) {
        // Do things with the data, e.g.
        Object.assign(elements.floating.style, {
          maxWidth: `${availableWidth}px`,
          maxHeight: `${availableHeight}px`,
        });
      },
    }),
  ],
});

import {computePosition, size} from '@floating-ui/dom';
 
computePosition(referenceEl, floatingEl, {
  middleware: [
    size({
      apply({availableWidth, availableHeight, elements}) {
        // Do things with the data, e.g.
        Object.assign(elements.floating.style, {
          maxWidth: `${availableWidth}px`,
          maxHeight: `${availableHeight}px`,
        });
      },
    }),
  ],
});

Options

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

interface Options extends DetectOverflowOptions {
  apply?: (
    state: MiddlewareState & {
      availableWidth: number;
      availableHeight: number;
    }
  ) => void;
}

interface Options extends DetectOverflowOptions {
  apply?: (
    state: MiddlewareState & {
      availableWidth: number;
      availableHeight: number;
    }
  ) => void;
}

apply

default: undefinedundefined

Unlike other middleware, in which you assign styles after computePosition()computePosition() has done its work, size()size() has its own applyapply function to do the work during the lifecycle:

size({
  apply({availableWidth, availableHeight, ...state}) {
    // Style mutations here
  },
});

size({
  apply({availableWidth, availableHeight, ...state}) {
    // Style mutations here
  },
});

availableWidth

Represents how wide the floating element can be before it will overflow its clipping context. You’ll generally set this as the maxWidthmaxWidth CSS property.

availableHeight

Represents how tall the floating element can be before it will overflow its clipping context. You’ll generally set this as the maxHeightmaxHeight CSS property.

…middlewareState

See MiddlewareState.

Many useful properties are also accessible via this callback, such as rectsrects and elementselements, the latter of which is useful in the context of React where you need access to the floating element and it does not exist in scope.

…detectOverflowOptions

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

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

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

Deriving options from state

You can derive the options from the middleware lifecycle state:

size((state) => ({
  padding: state.rects.reference.width,
}));

size((state) => ({
  padding: state.rects.reference.width,
}));

Using with flip

Using size()size() together with flip()flip() enables some useful behavior. The floating element can be resized, thus allowing it to prefer its initial placement as much as possible, until it reaches a minimum size, at which point it will flip.

If you’re using the paddingpadding option in either middleware, ensure they share the same value.

bestFit

The 'bestFit''bestFit' fallback strategy in the flip()flip() middleware is the default, which ensures the best fitting placement is used. In this scenario, place size()size() after flip()flip():

const middleware = [
  flip(),
  size({
    apply({availableWidth, availableHeight}) {
      // ...
    },
  }),
];

const middleware = [
  flip(),
  size({
    apply({availableWidth, availableHeight}) {
      // ...
    },
  }),
];

Scroll the container

Floating

This strategy ensures the floating element stays in view at all times at the most optimal size.

initialPlacement

If instead, you want the initial placement to take precedence, and are setting a minimum acceptable size, place size()size() before flip()flip():

const middleware = [
  size({
    apply({availableHeight, elements}) {
      Object.assign(elements.floating.style, {
        // Minimum acceptable height is 50px.
        // `flip` will then take over.
        maxHeight: `${Math.max(50, availableHeight)}px`,
      });
    },
  }),
  flip({
    fallbackStrategy: 'initialPlacement',
  }),
];

const middleware = [
  size({
    apply({availableHeight, elements}) {
      Object.assign(elements.floating.style, {
        // Minimum acceptable height is 50px.
        // `flip` will then take over.
        maxHeight: `${Math.max(50, availableHeight)}px`,
      });
    },
  }),
  flip({
    fallbackStrategy: 'initialPlacement',
  }),
];

Match reference width

A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents. You can also use size()size() for this, as the RectRects get passed in:

size({
  apply({rects}) {
    Object.assign(floatingEl.style, {
      width: `${rects.reference.width}px`,
    });
  },
});

size({
  apply({rects}) {
    Object.assign(floatingEl.style, {
      width: `${rects.reference.width}px`,
    });
  },
});