Fomantic-ui: Scrollable Tab or icon for scroll when the Tab width exceeds the container width

Created on 4 Jun 2020  路  1Comment  路  Source: fomantic/Fomantic-UI

Feature Request

The Tabs gets hidden or it makes its parent element scroll when the width of Tab exceeds its container width. Shouldn't this be handled using either of two:

  1. The Tab itself gets scrollable
  2. An icon gets added to the ends of the Tab

Sample
https://codesandbox.io/s/fomantic-tab-issue-v6er3?file=/src/App.js

I tried it by changing the fomantic CSS as

.ui.secondary.pointing.menu{
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      background: transparent;
    }
 }

But this made the active Tab bottom border gone. Also, the scrollbar not hiding.

statawaiting-investigation tahelp-wanted typfeat

Most helpful comment

I've run into a similar design issue before, I used JS to dynamically create a simple dropdown on the right side. It would be nice if the tab container could detect when it is overflowing and update the dropdown manually though.

image

https://jsfiddle.net/h61dvjbz/

(I know this isn't directly related to your request, I just thought I'd mention a solution I've used before)

>All comments

I've run into a similar design issue before, I used JS to dynamically create a simple dropdown on the right side. It would be nice if the tab container could detect when it is overflowing and update the dropdown manually though.

image

https://jsfiddle.net/h61dvjbz/

(I know this isn't directly related to your request, I just thought I'd mention a solution I've used before)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jamessampford picture jamessampford  路  3Comments

davekc picture davekc  路  4Comments

prmdhost picture prmdhost  路  5Comments

hammy2899 picture hammy2899  路  5Comments

lubber-de picture lubber-de  路  4Comments