How to make scroll appear only the content exceeds specified width? - css

Question

I am creating custom tabs using react and material UI. In these tabs, we don't have a fixed tab count, based on the data, the length of the tab might increase and decrease. So we planned to add scrollable functionality If the tabs count is not occupied in the given space.
But by default, the scroll is appearing even if we have only one data.
below is the code for it.
import { Key, useState } from "react";
import { styled } from "#mui/material/styles";
import Button from "#mui/material/Button";
import { ReactComponent as Plus } from "./plus.svg";
import React from "react";
const Tabs = styled("div")`
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
`;
const TabContainer = styled("ul")(() => ({
padding: 0,
margin: 0,
display: "flex",
flex: "1 1 auto",
overflowX: "auto",
overflowY: "hidden",
"& li": {
"&:first-of-type": {
marginLeft: 0,
"#media (max-width: 991px)": {
marginLeft: 10
}
}
},
"#media (max-width: 400px)": {
display: "unset"
}
}));
const Nav = styled("nav")(() => ({
display: "flex",
"#media (max-width: 991px)": {
textAlign: "center"
}
}));
const Tab = styled("li")(({ theme }) => ({
border: `2px solid ${theme.palette.grey[900]}`,
borderBottom: "none",
margin: "0 10px",
display: "block",
float: "left",
position: "relative",
borderTopRightRadius: 5,
borderTopLeftRadius: 5,
backgroundColor: theme.palette.common.white,
"#media (max-width: 991px)": {
float: "unset",
textAlign: "center"
},
"&.tab-current": {
border: `2px solid ${theme.palette.primary.main}`,
borderBottom: "none",
zIndex: 100,
"&::before": {
content: '""',
position: "absolute",
height: "2px",
right: "100%",
bottom: 0,
width: "1000px",
background: theme.palette.primary.main
},
"&::after": {
content: '""',
position: "absolute",
height: "2px",
right: "100%",
left: "100%",
bottom: 0,
width: "4000px",
background: theme.palette.primary.main
},
"& span": {
color: theme.palette.primary.main
}
}
}));
const Span = styled("span")(({ theme }) => ({
color: theme.palette.grey[900],
display: "block",
fontSize: "24px",
lineHeight: 2.5,
padding: "0 14px",
cursor: "pointer",
fontWeight: 400,
overflow: "hidden",
maxWidth: "ch",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
}));
const AddGoalCTA = styled("span")(({ theme }) => ({
color: theme.palette.grey[900],
display: "block",
fontSize: "24px",
lineHeight: 2.5,
padding: "0 24px",
cursor: "pointer",
fontWeight: 900,
overflow: "hidden",
whiteSpace: "nowrap"
}));
const ButtonContainer = styled("div")(() => ({
float: "right",
"#media (max-width: 991px)": {
display: "none"
},
"& .MuiButton-root": {
padding: "10px"
}
}));
const PlusIcon = styled("span")(() => ({
width: "24px",
color: "black"
}));
const tabsData = ["Save For College", "Retirement Saving", "Save For Bike"];
// const tabsData = ["Save For College", "Retirement Saving", "Save For Bike", "Legacy Saving", "Save For Poker", "Save For Money"]
const TabsComponent = ({ hideEditButton, showAddTab = true }: any) => {
const [toggleState, setToggleState] = useState(0);
const toggleTab = (index: any) => {
setToggleState(index);
};
return (
<>
<Tabs>
<Nav>
<TabContainer>
{tabsData?.map((value: string, index: Key | null | undefined) => (
<Tab
className={toggleState === index ? "tab-current" : ""}
onClick={() => toggleTab(index)}
key={index}
tabIndex={0}
role="tab"
>
<Span>{value}</Span>
</Tab>
))}
{showAddTab && (
<Tab
onClick={() => {}}
tabIndex={0}
role="tab"
onKeyPress={() => {}}
>
<AddGoalCTA>
<PlusIcon as={Plus} />
</AddGoalCTA>
</Tab>
)}
</TabContainer>
{!hideEditButton && (
<ButtonContainer>
<Button variant="contained" onClick={() => {}}>
Edit
</Button>
</ButtonContainer>
)}
</Nav>
</Tabs>
</>
);
};
export default TabsComponent;
Here you can find the working demo - https://codesandbox.io/s/mui-tabs-9sgt89?file=/tab.tsx:0-4092
Please help me to resolve this one.

Answer 1

I checked your code. Actually for the current tab &::after has fixed width width: "4000px", which is causing the issue. you can reduce it to 1000px or to your convenience.
Hope this helps!!
Thanks