react-component / react-component/tabs

Nav Scroll tabs breaks flex layouts

Open
#173 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
572
Forks
241
Avg merge
4d 18h
Merged PRs (30d)
4

Description

I've seen that it's using width: 99999px; by design to implement the scroll but this causes some issues when using the tabs inside a flex container.

We can reproduce this in the rc-tabs docs.

http://react-component.github.io/tabs/examples/activeKey.html

Change the container to display flex and add some padding like this:

screen shot 2019-03-07 at 21 21 54

You can see that the content inside the tab isn't respecting the padding of the container and it goes beyond the size of the page.

screen shot 2019-03-07 at 21 22 45

Removing the width on .rc-tabs-nav-scroll fixes the issue:

screen shot 2019-03-07 at 21 23 50

Note that this is actually really important, if there's any div that uses % widths inside the content or anything with position absolute, it'll be completely broken, the same applies to any kind of grid layout inside that.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the rc-tabs activeKey documentation example and reproduce the issue by placing the tabs in a flex container with padding. Inspect the .rc-tabs-nav-scroll styles, especially its 99999px width, and verify the layout with percentage-width or absolutely positioned content. Done means the tabs respect the container bounds without breaking scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.