size

Provides data to change the size of a floating element.

<ShowFor packages={['core']}>

import {size} from '@floating-ui/core';

<ShowFor packages={['dom']}>

import {size} from '@floating-ui/dom';

<ShowFor packages={['react']}>

import {size} from '@floating-ui/react';

<ShowFor packages={['react-dom']}>

import {size} from '@floating-ui/react-dom';

<ShowFor packages={['vue']}>

import {size} from '@floating-ui/vue';

<ShowFor packages={['react-native']}>

import {size} from '@floating-ui/react-native';

This is useful to ensure the floating element isn't too big to fit in the viewport (or more specifically, its clipping context), especially when a maximum size isn't specified. It also allows matching the width/height of the 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: scroll{:sass} (or auto{:.param}). Ensure your CSS is using box-sizing: border-box{:sass}!

<ShowFor packages={['core']}>

computePosition(referenceEl, floatingEl, {
  middleware: [
    size({
      apply({availableWidth, availableHeight, elements}) {
        // Change styles
      },
    }),
  ],
});

<ShowFor packages={['dom']}>

computePosition(referenceEl, floatingEl, {
  middleware: [
    size({
      apply({availableWidth, availableHeight, elements}) {
        // Change styles, e.g.
        Object.assign(elements.floating.style, {
          maxWidth: `${Math.max(0, availableWidth)}px`,
          maxHeight: `${Math.max(0, availableHeight)}px`,
        });
      },
    }),
  ],
});

<ShowFor packages={['vue']}>

useFloating(reference, floating, {
  middleware: [
    size({
      apply({availableWidth, availableHeight, elements}) {
        // Change styles, e.g.
        Object.assign(elements.floating.style, {
          maxWidth: `${Math.max(0, availableWidth)}px`,
          maxHeight: `${Math.max(0, availableHeight)}px`,
        });
      },
    }),
  ],
});

<ShowFor packages={['react', 'react-dom']}>

useFloating({
  middleware: [
    size({
      apply({availableHeight, elements}) {
        const value = `${Math.max(0, availableHeight)}px`;

        // 1. Assign directly:
        elements.floating.style.maxHeight = value;
        // 2. Or, use a CSS variable:
        elements.floating.style.setProperty(
          '--available-height',
          value,
        );
      },
    }),
  ],
});

Options

These are the options you can pass to size(){:js}.

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

apply{:.function}

default: undefined{:js}

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

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

availableWidth{:.param}

Represents how wide the floating element can be before it will overflow its clipping context. You'll generally set this as the maxWidth{:.key} CSS property.

availableHeight{:.param}

Represents how tall the floating element can be before it will overflow its clipping context. You'll generally set this as the maxHeight{:.key} CSS property.

...middlewareState

See MiddlewareState.

Many useful properties are also accessible via this callback, such as rects{:.key} and elements{:.key}.

...detectOverflowOptions

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

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,
}));

Using with flip(){:js}

Using size(){:js} together with flip(){:js} 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 padding{:.key} option in either middleware, ensure they share the same value.

bestFit{:.string}

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

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

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

initialPlacement{:.string}

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

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(){:js} for this, as the Rect{:.class}s get passed in:

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

Troubleshooting

maxHeight style left on floating element

Leaving the maxHeight style on the floating element that's kept mounted in the DOM when closed can cause issues in certain situations where it can and should expand more.

By removing the style inside the apply{:.function} function when the scrollHeight is less than the availableHeight, you can prevent this:

elements.floating.style.maxHeight =
  availableHeight >= elements.floating.scrollHeight
    ? ''
    : `${availableHeight}px`;