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.

Tabs does not respond to container resizing

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

If Tabs is placed in a container that supports resizing (e.g. a container with a resize: both css rule), the Tabs component does not respond to container resizing. Looking at the source, I see that it only responds to window-level resizing.

The fix would be to use a ResizeObserver, and attach it to the Tabs ref, e.g. via

const observer = new ResizeObserver(entries => {
   doResize(entries[0].contentRect.width, entries[0].contentRect.height)
})
observer.observe(theTabsDom)

Is this issue related to a specific component?

Tabs

What did you expect to happen? What happened instead? What would you like to see changed?

<div style={{resize: 'both', overflow: 'auto'}}>
  <Tabs>...</Tabs>
</div>

What browser are you working in?

Electron 7, Firefox, Chrome, …

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Kui

Steps to reproduce the issue

Step one
Step two
Step three
etc.

Please create a reduced test case in CodeSandbox

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

i’d love to create a sandbox, but your template seems to be broken.