For my blazor tab control, I need the horizontal tab bar to be responsive when there are numerous tabs. Despite using tc-tabs, the scrollbar does not appear and it forces additional tabs to display on a new line.
https://i.sstatic.net/QTrn7.png
I am interested in exploring two potential solutions: - One that utilizes a scrollbar for overflow handling. - Another option where overflow is managed with arrow buttons located at each end of the tab bar (potentially implemented using razor functionalities).
In addition, I am working on fixing the close button placement at the top right corner of each tab, particularly when the tab name is lengthy.
Edit (Resolved close button alignment + text overflow within tab):
Despite making progress with aligning the close button, I continue to face challenges implementing the scrollbar solution as discussed in this post: Bootstrap horizontal scrollable tab bar
<ul class="nav nav-tabs tc-tabs">
@foreach (Tab tabItem in ItemsSource) {
<li class="tc-tab @(SelectedItem == tabItem ? "tc-tab-active" : string.Empty)">
<div @onclick="@(() => ActivatePage(tabItem))">
<span class="tc-tab-title @(SelectedItem == tabItem ? "active" : string.Empty)">
@tabItem.Title
</span>
</div>
<button class="close tc-tab-close" type="button" aria-label="Close" @onclick="@(() => DeletePage(tabItem))">
<span aria-hidden="true">×</span>
</button>
</li>
}
</ul>
CSS:
tc-tabs {
overflow-x: auto;
overflow-y: hidden;
display: -webkit-box;
}
.tc-tab {
width: 200px;
position: relative;
padding: 5px;
float: none;
}
.tc-tab-active {
background-color: darkgray;
color: white;
}
.tc-tab-title {
width: 85%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: absolute;
}
.tc-tab-close {
width: 10%;
}