ScrollArea replace display: table

[Toshinaki]

I've noticed that ScrollArea is no longer depends on Radix Scroll Area.

The display: table has been a pain to me, since it make the content takes the full width of the children, not the width of the parent. So it's always very difficult to use when I want only vertical scroll.

There has been a fix for this, that

Replace display: table with flex styles on the parent that allow the viewport to fill container height

radix-ui/primitives#2945
Though the fix is not released yet.

Since mantine ScrollArea no longer depend on radix, maybe we can adapt this fix?

[gl3nn]

Yeah in our application we also constantly have to overwrite display: table with !important to get desired results.

[rtivital]

This change might be added in v8 release as it can be breaking for some cases

[Toshinaki]

Nice to hear that!
Do we have a rough roadmap?

[rtivital]

No, there is no roadmap

[borstessi]

i got this pain now, is there any workaround?

[jean-gvh]

Where do I override these styles ? In the global css file ? Im struggling to find the solution.

[rtivital]

Inspect element in the dev tools, copy selector

[jean-gvh]

Okay, this is what I tried to do. I selected the m_c0783ff9 mantine-ScrollArea-viewport (see picture) and tried to override the styles in my index.css : .m_c0783ff9.mantine-ScrollArea-viewport { display: block !important; width: 100% !important; height: auto !important; } However I still have an issue.

The display:table is here.

[rtivital]

You've added these styles to viewport element that does not have display:table. You need to add these styles to the child element .mantine-ScrollArea-viewport > div instead.

[jean-gvh]

Thanks, indeed it is working now :)

[icflorescu]

Override these styles with !important

I did the same on a few different occasions :-)