Tabs indicator wrong position & width when using transform:scale.

[madmonliadd]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/usage-forked-gw74rl?file=/index.js

Steps:

1. Wrap the tabs component with a transform:scaled wrapper / use the link above.

Current behavior 😯

The tabs' indicator's position & width isn't correctly set.

Expected behavior 🤔

The tabs' indicator's position should be exactly below the selected tab, and its width should match exactly the selected tab's width.

Context 🔦

No response

Your environment 🌎

Using the codesandbox above.

[ZeeshanTamboli]

You need to target the indicator class on Tabs to style the tabs indicator. See the updated CodeSandbox: https://codesandbox.io/s/usage-forked-l1m7fu?file=/index.js

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[madmonliadd]

@ZeeshanTamboli You removed the scaled div, of course it'll work when you remove the parent scale.

[ZeeshanTamboli]

@ZeeshanTamboli You removed the scaled div, of course it'll work when you remove the parent scale.

@madmonliadd Sorry for that, I didn't read carefully about you saying Wrap the tabs component with a transform:scaled wrapper.

I don't know why you want to achieve scaling for your use case, but you can increase the scaling by directly applying the styles to the AppBar. Having a unnecessary div in between for scaling is causing the issue of moving the position of the tab indicator. As for the width, it is calculated dynamically under the hood according to the size of the tab and considers various other factors, but you can override it with the .MuiTabs-indicator class if you want to or instead calculate it as per the scaling and apply it.

See the updated CodeSandbox: https://codesandbox.io/s/usage-forked-1y7g9f?file=/index.js

I would suggest to use StackOverflow for these type of questions.

I hope it helps.

[madmonliadd]

@ZeeshanTamboli Hey, thanks for your help, I tried stack overflow without success, it's a bug, not a help request.
Your codesandbox didn't solve the issue, click other tabs and see how the position of the indicator is incorrect, it's not directly under the selected tab.

[ZeeshanTamboli]

it's a bug, not a help request.

It's not a bug. It's just about overriding with the correct styles.

You have to simply find a way to style the tab indicator properly. Maybe you want to check if you are correctly using transform: scale property. You may not want to scale the indicator or maybe you shouldn't use the scale on tabs in the first place and use sizing. Take a look at the customization of Tabs docs: https://mui.com/material-ui/react-tabs/#customization

[carmenchapa]

In case someone else lands here.
I faced this problem in an app where scaling a parent container was not up to me.
I could fix it by overriding left style of indicator like below. In my case the fixed values worked.

const indicatorLefts = {
  first: '0px',
  second: '50px',
  third: '100px',
}
....

<Tabs
  ...
    sx={{
      '& .MuiTabs-indicator': {
       left: `${indicatorLefts[activeTab]} !important`,
     }
   }}
>
...
</Tabs>