Allow disabling the `display: table` CSS on `SrollArea`

[hspak]

Feature request

Overview

I noticed that the ScrollArea component sets this display: table style as a strategy to recalculate thumb sizes: https://github.com/radix-ui/primitives/blob/55f9189a4b3e1a525c89297d5f337c03b2a44f61/packages/react/scroll-area/src/ScrollArea.tsx#L178-L187)

Examples in other libraries

N/A

Who does this impact? Who is this for?

There's a side navigation that I'm trying to use the ScrollArea component for that we allow for dynamic re-sizing and this table display is not respecting the width value from the parent.

Manually removing the CSS style from the browser solves the issue.

Additional context

N/A

[matiasvlevi]

Same issue here,

In the mean time I resorted to something like this:

useEffect(() => {
  const elem: HTMLElement | null = document.querySelector(
    ".my-scroll-area > div > div"
  );
  if (elem) elem.style.display = "block";
}, []);

this works, but it's also horrible. We really need a fix for disabling display:table

[f-z-coder]

Same issue

[aishwaryaborkar]

Bumping this, experiencing the same issue. Because of the display: table and min-width: 100%, the content overflows but you can't see it because of overflow: hidden and as a result, the content looks not centered (since overflow is hidden; it actually is centered). Ideal case would be allowing to override this.

[moonrailgun]

idk but when i check source code, this code has been changed in https://github.com/radix-ui/primitives/commit/f6d70b3050929effc910971ddd3a5259c9de17ff

did its means have been resolved?

[f-z-coder]

Yes

idk but when i check source code, this code has been changed in f6d70b3

did its means have been resolved?

Yes now it resolved in version 1.2 but currently this version is in Rc mode

[moonrailgun]

yeah, look forward 1.2.0 release.

i am watching it.

[hspak]

This appears fixed on 1.2.0 and it's been released! 🎉

[omridevk]

Should re-open: https://github.com/radix-ui/primitives/pull/3225 the fix was reverted.

[jkhaui]

Should re-open: #3225 the fix was reverted.

Please, please add a prop to use anything but display: table on the nested div... It's so painful to work with...

I even tried using asChild with a flex container as the immediate child of ScrollArea.Viewport, but it messed up scrolling

[tgds]

yes, please! this breaks layout and its impossible to work with in certain scenarios as children stretch the table div (max-width is not respected as we enter table formatting context and intrinsic table width wins). for example, if you need items in a vertical scrollarea with text ellispsis and set white-space: nowrap; text-overflow: ellipsis; overflow: hidden; on the item, the items are stretched and cut off.

[hubertoschusch]

bump

[michaelito80us]

i added an id to the Viewport

<ScrollArea.Viewport id="my-scroll-area-viewport" >

and then in my global css file:

#my-scroll-area-viewport > div {
  display: block !important;
}

and it works

[lucasmcht]

If you are using shadcn, adding this tailwind class [&>div]:!block to your <ScrollAreaPrimitive.Viewport/> component will do the trick.

[FarhanShares]

Bump, the issue is real. I had to spent 2 days just after this. Never knew this was from ScrollArea until I inspected the parent elements one by one. Using one of the hacks to fix now, but this should be solved in a better way.