size
size()
provides data to change the size of the floating
element. For instance, you can resize it so it doesn't overflow
the available space:
If your floating element's content cannot be resized such as in
the example, you can make the floating element scrollable with
overflow: scroll
(or auto
).
Usage
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`,
});
},
}),
],
});
If your element has a border, ensure your CSS is using
box-sizing: border-box
.
Options
These are the options you can pass to size()
.
interface Options extends DetectOverflowOptions {
apply?: (
args: MiddlewareArguments & {
availableWidth: number;
availableHeight: number;
}
) => void;
}
apply
default: undefined
Unlike other middleware, in which you assign styles after
computePosition()
has done its work, size()
has its
own apply
function to do the work during the
lifecycle:
size({
apply({
availableWidth,
availableHeight,
...middlewareArguments
}) {
// 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
maxWidth
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
maxHeight
CSS property.
...middlewareArguments
See MiddlewareArguments.
Many useful properties are also accessible via this callback,
such as rects
and elements
, 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
Using with flip
Using size()
together with 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 padding
option in either
middleware, ensure they share the same value.
bestFit
The 'bestFit'
fallback strategy in the flip()
middleware is the default, which ensures the best fitting
placement is used. In this scenario, place size()
after flip()
:
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
If instead, you want the initial placement to take precedence,
and are setting a minimum acceptable size, place size()
before 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',
}),
];
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()
for this, as the Rect
s get
passed in:
size({
apply({rects}) {
Object.assign(floatingEl.style, {
width: `${rects.reference.width}px`,
});
},
});