NbTabsetComponent: Tabset overflow-x should scroll
- Ngôn ngữ chính
- TypeScript
- Star
- 8.1k
- Fork
- 1.5k
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
### **Issue:**
When using an `NbTabsetComponent`, the `
- ` inside the tabset should scroll horizontally to improve UX, especially on small screens or when there are many tabs.
The `responsive` input parameter does not work well when tab titles contain arbitrary text and cannot be expressed by an icon.
Manually setting overflow-x: auto in the parent component's stylesheet causes the `.tab.active .tab-link::before` element inside nb-tabset to be mostly hidden.
### **Workaround:**
To resolve this issue, I removed the border from the `
- ` and created a custom border using the ::after pseudo-element. This allows margin or padding to be applied to ``, ensuring that the `.tab.active .tab-link::before` element is not clipped, preventing a vertical scrollbar.
```
nb-tabset .tabset {
border-bottom: none;
position: relative;
overflow-x: auto;
padding-bottom: 4px;
}
nb-tabset .tabset::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: var(--tabset-divider-width);
background: var(--tabset-divider-color);
}
nb-tabset .tab.active .tab-link::before {
z-index: 1;
}
```
This approach ensures proper scrolling behavior while maintaining the visual integrity of the active tab indicator.
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.