Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not an issue but rather a suggestion: adding appearance option for multiple lines for tabs #38

Open
rchaklashiya opened this issue Jul 28, 2024 · 1 comment
Labels
appearance Related to Tabs appearance

Comments

@rchaklashiya
Copy link

I'm not sure how to denote suggestions so I'll add this here, I needed to include multiple lines for the tabs since otherwise they would overflow and I wouldn't be able to see all my tabs. I fixed it by adding in this css code to the end of my tabs plugin css:

/these code lines are for making tabs show up as two rows/
/* Ensure the tab container and its items wrap when necessary /
.tabs-container .tabs-nav .tabs-nav-item-wrapper {
display: flex;
flex-wrap: wrap; /
Allows the tabs to wrap */
width: 100%;
}

/* Adjust each tab item to flex properly /
.tabs-container .tabs-nav .tabs-nav-item {
flex: 1 1 auto; /
Allows tabs to grow and shrink /
min-width: 100px; /
Minimum width of each tab item */
}

/* If you prefer horizontal scrolling instead of wrapping /
.tabs-container .tabs-nav .tabs-nav-item-wrapper {
display: flex;
overflow-x: auto; /
Adds horizontal scrolling /
white-space: nowrap; /
Prevents wrapping */
}

.tabs-container .tabs-nav .tabs-nav-item-wrapper::-webkit-scrollbar {
display: block; /* Show scrollbar */
}

/* Ensure each tab item stays in a single line /
.tabs-container .tabs-nav .tabs-nav-item {
display: inline-block; /
Keeps items in a single line */
}

My suggestion is to include something like this as an option in the main code.

@rchaklashiya rchaklashiya changed the title Not an issue but rather a suggestion Not an issue but rather a suggestion: adding appearance option for multiple lines for tabs Jul 28, 2024
@xhuajin
Copy link
Owner

xhuajin commented Jul 31, 2024

Thank you very much for your serious feedback. Multi line style already exist after v1.1.3. You can find it at Tabs setting -> Appearance -> Tabs nav -> Tabs nav item line clamp.

@xhuajin xhuajin added the appearance Related to Tabs appearance label Jul 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
appearance Related to Tabs appearance
Projects
None yet
Development

No branches or pull requests

2 participants