carbon-componentscarbon-components-reactDescribe 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
Please create a reduced test case in CodeSandbox
i'd love to create a sandbox, but your template seems to be broken.
thanks for the example. we won't be able to use ResizeObserver until we drop IE support and I'm not sure if we would want to polyfill it. There may be an existing solution by watching the resize event but I don't know if that's supported in React
I guess my suggestion would be that, by supporting all-but-IE, the IE support remains as it is today. I.e. we won't be degrading the IE experience, by fixing the bugs everywhere else.
yeah I can see that, may look into this further after some of the currently open Tabs issues have been resolved