Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TabPanel] No way to overflow using scroll

See original GitHub issue

Describe the bug For a TabPanel, I want it to (on overflow) allow scrolling, however, even after adding overflow="scroll" as prop, I cannot seem to find a way to do so.

Expected Behavior Able to scroll on the X or Y axis in the event of an overflow.

Am I missing something or is this a feature that is not in Chakra?

Issue Analytics

State:
Created 4 years ago
Comments:8 (2 by maintainers)

Top GitHub Comments

6reactions

segunadebayocommented, Jan 31, 2020

I just checked it. There’s no problem with the TabPanel, it’s mostly a styling issue.

You need to add maxHeight and overflowY to get it to work correctly.

Here’s a working example: https://codesandbox.io/s/wonderful-gauss-6rc6b

2reactions

vytautas-pilkcommented, Feb 7, 2022

What works for me is setting display='flex' and flexDirection='column' to <Tabs> component and then overflowY='scroll' to <TabPanels> component.

Top Results From Across the Web

nav-tabs Not Scrolling with overflow-x: scroll

First, the default behavior is moving items to next line. I fixed this with white-space: nowrap and flex-wrap: nowrap . And I realized...

Is there way to make lightning-tabset scrollable?

You will not be able to scroll the lightning-tabs with ... Limited height should force scroll. If not add also overflow-y: scroll;

Keep tab scrolling overflow, but disable auto tab scrolling

When you open too many tabs, it starts an overflow where you can use the arrows or your scroll wheel to scroll the...

Overflow - Tailwind CSS

Use overflow -x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. Andrew.

Element settings- Tabs scroll - formtitan support

Once the total width of the tabs in a tabbed section is larger than the width of the Section itself, a scroll is...