Skip to content

Conversation

@Jialecl
Copy link
Collaborator

@Jialecl Jialecl commented Mar 22, 2024

Checklist
(Check off all the items before submitting)

  • Build process is done without errors. All tests pass in the /lib directory.
  • Self-reviewed the code before submitting.
  • Meets accessibility standards.
  • Added/updated documentation to /website as needed.
  • Added/updated tests as needed.

Purpose
Overflow was added to the NavTabs and fixed an issue related to z-index.

Description
Overflow was added and the width of the NavTabs is now based on the available space including the scroll in case it is scrollable.
The z-index for the whole component is set to 0 and the underline is set to -1, instead of setting the component tabs to 1.

Screenshots
image
image

Closes #1923

@Mil4n0r Mil4n0r self-requested a review March 22, 2024 12:12
@Mil4n0r Mil4n0r self-assigned this Mar 22, 2024
Copy link
Collaborator

@Mil4n0r Mil4n0r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be a cleaner way to perform this task without having to use scrollWidth, but I haven't been able to do it either.

Maybe there is a way to get rid of Underline entirely and just handle it in the Tab border-bottom. However, that would cause the problem stated here #1525 if no other modifications are done.

Copy link
Collaborator

@Mil4n0r Mil4n0r left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No other working solutions have been found and this pattern was already used in regular Tabs so we will stick to it.

@Mil4n0r Mil4n0r merged commit d123a22 into master Apr 12, 2024
@Mil4n0r Mil4n0r deleted the jialecl/navtabs-overflow branch April 12, 2024 11:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nav tabs responsiveness not working

3 participants