动态设置文本宽度

Question

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.

Sandbox

Answer 1

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.