Angular 14 Bootstrap 5
I developed a custom tabs component with pipes between the tabs that works flawlessly. However, I encountered an issue where the tabs slightly shift when the tab title exceeds 8 characters. Despite my efforts, I cannot pinpoint the cause of this problem.
You can view the Stackblitz Example here.
The setup consists of tabs, a tab component, and the main app component utilizing these elements. While seemingly simple, the mysterious shifting persists, even after adjusting the CSS to remove any potential culprits like hidden pipes and margins.
Any insights or suggestions are greatly appreciated.
UPDATE: It appears that the issue may not be related solely to the length of the tab titles.
UPDATE 2: The root cause seems to lie in the width of the .nav-item class. Assigning a fixed width, such as 200px, eliminates the slight shifting behavior. However, a static width is impractical due to variable tab title lengths and alignment concerns.
UPDATE 3: Further investigation reveals that the change in font-weight within the active state of nav-link triggers the problem (from 400 to 500). Yet, attempts to maintain consistent box size when the font changes using 'box-sizing: border-box' have been unsuccessful. Here is the relevant CSS snippet:
.nav-link {
font-size: 16px;
font-weight: 400;
line-height: 8px;
height: 33px;
color: #4285eb !important;
}
.nav-link.active {
background: rgba(66, 133, 235, 0.15) !important;
border-radius: 4px;
font-weight: 500;
}