scrollbar layout shift with dialog, dropdownmenu, etc

[rtkaaho]

For components that remove pointer events when opened, I am noticing a decent amount of layout shift as a result of the scrollbars toggling in and out. That is not something I am noticing on the radix docs site. I was wondering if you could provide any tips/tricks that you have learned to remove some of that layout shift?

[benoitgrelard]

Hey @rtkaaho,

It is actually due to removing the scroll, rather than pointer events.
Under the hood, we use a library called react-remove-scroll which exposes some classes to use to mitigate this.

If you look at our docs code, you'll see some examples of how we use this in places.

Worth looking at also, the lib itself.
It is itself built on top of a more generic one, where you can see the constants exported.

I hope that helps!

[mithleshjs]

@hamidbjss Try this solution #346 (comment)

[DonHuskini]

The solution that worked for me was:

body {
  margin: 0;
}

function onOpenChange(open: boolean) {
    document.body.style.paddingRight = open ? "0px" : "";
}
return (
  <DropdownMenu.Root onOpenChange={onOpenChange}>
    {children}
  </DropdownMenu.Root>
);

[benoitgrelard]

FYI, we have fixed the issue in the upstream package and upgraded the dependency. So the regression should be gone in all the latest release candidates.

#1448

[hamidbjss]

Awesome, thanks @benoitgrelard!

Also thanks to @mithleshjs and @gabrielmlinassi for the suggestions.

[jtabone16]

@benoitgrelard I'm still seeing this issue after updating our select component to 1.0.0. Opening the select shifts our header, which is fixed

[jtabone16]

I'm still seeing this issue after updating our select component to 1.0.0. Opening the select shifts our header, which is fixed

[benoitgrelard]

@jtabone16 I've answered in your other discussion: #1586

[aryanas159]

Putting modal={false} on the root dropdown element fixed it for me.

[NoCtrlZ1110]

thank you, you saved my day!

[Kochiyama]

Thank you! Life saving.

[btnalexandre]

Thankkkkks

[dpgraham4401]

Still only thing that worked for me.

[arturhaddad]

@ashik-75 to keep the overlay you can check this solution

[tspvvd]

Adding the correct RemoveScroll class to all relevant position: fixed elements fixed it for me. Good news for me I only have the navbar using position: fixed, but I don't think for a typical application there should be a lot of position: fixed. (This excludes position: fixed in e.g. <DialogOverlay />.)

import { RemoveScroll } from 'react-remove-scroll';

<nav
  className={cn(
    'fixed inset-x-0 top-0',
    RemoveScroll.classNames.zeroRight, // here
  )}
>
  ...
</nav>

Ref: https://github.com/theKashey/react-remove-scroll?tab=readme-ov-file#positionfixed-elements
Ref: https://github.com/theKashey/react-remove-scroll-bar?tab=readme-ov-file#the-right-border

(This is the same thing as the answer by @/benoitgrelard above, but it wasn't immediately clear to me reading the answer at first, so I post this hopefully to make it clearer to everyone coming to this thread from Google.)

[arturhaddad]

I was able to

• keep using the modal={true}
• display the overlay
• and keep the scroll enabled only inside the modal

by wrapping the scrollable content within <RemoveScroll> using the shards property:

import * as RadixDialog from '@radix-ui/react-dialog';
import { RemoveScroll } from 'react-remove-scroll';
import { useRef } from 'react';

export default function Dialog({ open, onOpenChange, children, trigger, title }) {
  const scrollableRef = useRef(null);

  return (
    <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={true}>
      {trigger && <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>}
      <RadixDialog.Portal>
        <RadixDialog.Overlay />
        <RadixDialog.Content>
          {title && <RadixDialog.Title>{title}</RadixDialog.Title>}

          {/* Using RemoveScroll with shards allows scrolling the content, with modal mode and overlay active */}
          <RemoveScroll shards={[scrollableRef]}>
            <div ref={scrollableRef}>{children}</div>
          </RemoveScroll>

        </RadixDialog.Content>
      </RadixDialog.Portal>
    </RadixDialog.Root>
  );
}