I have created a tab component, the one part which I am not able to achieve is that, instead of TabIndicator to entirely take the length of the tab container I need to set only the text width.
Since each text has different width I am using js to calculate it, but instead of getting the width, I am able to get the container width.
How can I make the active TabIndicator line only expand from the start of the text to the end of text.
I am able to achieve the container width. Adding the sandbox link for the same.
It's simple. You need to subtract extra paddings while calculating the start and width of the indicator.
.tab has 6px padding horizontally
.tab-default-container has 1rem padding on desktop it's 16px
.
So change code something like:
if (tabMeta && tabsMeta) {
startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft + 22; //16+6=22
}
//22 from both sides = 44px tor remove.
const newIndicatorStyle = {
left: startValue,
width: tabMeta ? tabMeta.width - 44 : 0
};
Updated sandbox.
Note: You've used relative unit rem it may evaluate different on different settings and devices, it may not be 1rem=16px.
The rem (for “root em”) is the font size of the root element of the document.
So do the calculations considering this.