You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 */
}
/* 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.
The text was updated successfully, but these errors were encountered:
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
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.
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.
The text was updated successfully, but these errors were encountered: