Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to make the tabs scrollable? #4479

Open
andiras opened this issue Apr 30, 2024 · 5 comments
Open

How to make the tabs scrollable? #4479

andiras opened this issue Apr 30, 2024 · 5 comments

Comments

@andiras
Copy link

andiras commented Apr 30, 2024

Hello there!

I have a feature with 10 tabs and when I change the window size or use phone, I can't see the last tabs and I can't scroll to the right.

Material has a "Scrollable" option available where it shows chevrons on both sides to navigate to the first/last tabs.

Do we have anything like this or any other suggestion? I tried making the tabs vertically but it was not good on the phone.

Thanks

Copy link

welcome bot commented Apr 30, 2024

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

@rishabh-bijalwan12
Copy link

Can you provide a screenshot where you cannot scroll the tab to the right?

@andiras
Copy link
Author

andiras commented May 7, 2024

Here is an example.

Sandbox

I added a bunch of tabs and it shows properly when I have the windows with full width:

image

However, when I change the width it won't allow me to click or see the tabs on the right side:

image

Material has these left and right scroll buttons so I wondered if we had something similar or at least a scroll bar.

image

@jcuencagento
Copy link

jcuencagento commented May 8, 2024

<Tab className="scroll" panes={panes} /> works for me

@andiras
Copy link
Author

andiras commented May 8, 2024

@jcuencagento but you added the scroll style to show the scroll bar right? I did something similar with "overflow-y: hidden;" but I didn't like it.
It would be good to have the chevrons on the left/right side to navigate through tabs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants