search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.51k stars 791 forks source link

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

Open hspak opened 3 months ago

hspak commented 3 months ago

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 commented 3 months ago

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 commented 2 months ago

Same issue

aishwaryaborkar commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

yeah, look forward 1.2.0 release.

i am watching it.

image