After implementing a UI with 4 tabs, I noticed that the gap between the tabs is inconsistent. When attempting to set the width to auto, the indicator below the tabs does not display properly.
Here is the code for the tabs:
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true">
<span class="MuiTab-wrapper">Aikika</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false">
<span class="MuiTab-wrapper">Qwertyuio</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false">
<span class="MuiTab-wrapper">Plmojnuhbtf</span>
<span class="MuiTouchRipple-root"></span>
</button>
<button class="MuiButtonBase-root MuiTab-root jss2 MuiTab-textColorInherit" tabindex="-1" type="button" role="tab" aria-selected="false">
<span class="MuiTab-wrapper">Tokjl Test</span>
<span class="MuiTouchRipple-root"></span>
</button>
</div>
And here is the code for the indicator (the underline below the tab):
<span class="jss3 jss5 MuiTabs-indicator jss1" style="left: 0px; width: 120px;"></span>
The CSS code for the tabs is:
.MuiTabs-flexContainer button {
min-width: 120px;
font-weight: 100;
margin-top: 8px;
}
And the CSS code for the indicator is:
.jss1 {
height: 3px;
background-color: #09728e;
}
Although everything is currently working fine, I am aiming to make the gap between the tabs consistent and ensure the indicator functions correctly. Screenshots have been attached for reference - The red box highlights the gap between tabs, while the blue line indicates the indicator below the tabs.