CODEWITHSUNDEEP
javascriptcssreactjs
dev
dev

Reputation: 916

Setting the text width on dynamically

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

Upvotes: 3

Views: 646

Answers (1)

the Hutt
the Hutt

Reputation: 18398

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.

Upvotes: 1

Related Questions