Select causing layout shift in external monitor.

[ghost]

Bug report

Current Behavior

Select add --removed-body-scroll-bar-size: 15px on 24inch secondary monitor.
But when I visit on my 13inch, it's --removed-body-scroll-bar-size: 0px. The same value gets added to the margin-right property of body and it's causing a layout shift.

Suggested solution

By removing

body {
   margin-right: 15px !important;
}

Software	Name(s)	Version
Radix Package(s)	Select
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System	MacOS

[HoangTitannn]

This is what fixed it for me inside global.css (tailwind css). You have to target body[data-scroll-locked] but you have to be even more specific by adding html as well because the DropDownMenu component will still try to override it.

  html body[data-scroll-locked] {
    margin-right: 0 !important;
  }

Thanks i have same issue and it work

[marcelino-borges]

None of the above suggestions worked for me.

My solution: adding width: 100vw; to body in my globals.css.

/* globals.css */

body {
  /* (...) */
  width: 100vw;
}

I didn't try body[style] { margin: 0 auto !important; } though, because I think it's too much haha

ps.: my use case is a fixed header with 100% width containing a dropdown menu

[Pascalmh]

Depending on your layout you'll need to add additional classes from react-remove-scroll-bar which is used internally for the radix-ui/primitives.

I needed to add the fullWidthClassName to my "main div" (the first child after the router outlet).

It is adding a margin-right: 15px !important; once the select is opened to the div it is applied to (if there was a scrollbar before - otherwise it adds margin-right: 0px !important;)

See also: https://github.com/radix-ui/primitives/discussions/1586#discussioncomment-3302669

[mausam-giri]

I was facing layout shifts when opening the Radix Dialog modal and while picking items from the Select component. The solutions provided didn’t entirely solve the issue, but here’s what worked for me:

• For the Modal (Radix Dialog), I found that setting --removed-body-scroll-bar-size: 0px !important; helped resolve the layout shift caused by the scrollbar.

• For the Select, the main issue wasn’t margin-right, but the padding-right added bydata-scrolled-locked='2'. I resolved the layout shift by explicitly setting padding-right: 0 !important;.

Here’s the solution that fixed both issues:

html body[data-scroll-locked] {
  padding-right: 0 !important;
  --removed-body-scroll-bar-size: 0px !important;
}

This combination ensures that both the Dialog and Select components no longer cause layout shifts.

[DanielSpindler]

Don't need to add extra classes or something just remove this min width class from select component imported from shadcn and this issue will gone

Also from the dropdown

That might be true for your setup, but shouldnt fix it at all! else your dropdown dictates the size width of your page. Usually CSS like that comes from a layout. And most people here have the LayoutShifts because clicking the select triggers an Event that removes css and replaces it on a TopLevel. They already did a quick fix for it and it should be gone for correct implementations. Min-w is just a minimum width. Wrong implementation of the Component if this triggers a Layoutshift.