We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
This doesn't work as the container div's width is too small to hold the wide tab.
div
import { useRef, useEffect, useState } from "react"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import "react-tabs/style/react-tabs.css"; export const MyTab = () => { const containerRef = useRef<HTMLDivElement>(null); const [maxTabWidth, setMaxTabWidth] = useState(0); useEffect(() => { if (containerRef.current) { let maxWidth = 0; const tabElements = containerRef.current.querySelectorAll<HTMLElement>(".react-tabs__tab"); tabElements.forEach((tab) => { const width = tab.offsetWidth; if (width > maxWidth) { maxWidth = width; } }); setMaxTabWidth(maxWidth); } }, []); return ( <div ref={containerRef} style={{ width: maxTabWidth }} > <Tabs> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> </TabList> <TabPanel> Narrow tab </TabPanel> <TabPanel> {Array(100).join("a")} </TabPanel> </Tabs> </div> ); }
CodeSandbox
The text was updated successfully, but these errors were encountered:
Looks like the class is .react-tabs__tab-panel. Although it doesn't fix my real case it fixes the simplified version in the sandbox.
.react-tabs__tab-panel
Sorry, something went wrong.
No branches or pull requests
This doesn't work as the container
div
's width is too small to hold the wide tab.CodeSandbox
The text was updated successfully, but these errors were encountered: