CODEWITHSUNDEEP
javascriptoffice-jsoffice-ui-fabric
Leo
Leo

Reputation: 5122

UI Fabric-js Pivot control - no link item overflow functionality

I am trying to use the Pivot component from the Office UI Fabric JS library but I have found that it does not have functionality to deal with link items overflow.

The documentation shows the overflow as ellipsis however this does not have any functionality behind it. It is just for presentation.

As anyone modified this component so that it automatically resize and show all the links correctly?

Upvotes: 2

Views: 485

Answers (1)

Marc LaFleur
Marc LaFleur

Reputation: 33094

There is a known issue with the Pivot control. In order to get it to work, you need to override the overflow-x: hidden that is set in the default stylesheet. Adding the following to your page's CSS seems to fix it:

.ms-Pivot{
  overflow-x: visible;
}

You'll also need to make sure you wire up the JavaScript for Pivot and Context Menu. This includes the script to swap the is-hidden and is-open classes when clicking on the ellipsis.

At the moment there isn't any automatic sizing of tab or automatically moving the overflowed elements into a context menu.

Upvotes: 2

Related Questions