Handling overflow tabs

17 Jan 20251 minute to read

When you have large number of tabs, the scroller will be enabled to view the overflow of headers, by default. It can be selected from a pop-up by setting the OverflowMode property of SfTabView to DropDown.

tabView.OverflowMode = OverflowMode.DropDown;

By selecting drop-down option for tab view control, the “Overflow button” (or “More button”) will be added to the header. When you click the “Overflow button”, it will display a pop-up to navigate the other indices.

NOTE

Pop-up will display the text value only; it will show the title value of the respective tab item.

How to customize the more button?

The appearance of the text can be customized through the APIs that are available in OverflowButtonSettings of SfTabView. It has APIs to customize both text and font icons available in this button.

var overflowButtonSettings = new OverflowButtonSettings();
		overflowButtonSettings.BackgroundColor = Color.Red;
		overflowButtonSettings.DisplayMode = OverflowButtonDisplayMode.Text;
		overflowButtonSettings.Title = "...";
		overflowButtonSettings.TitleFontColor = Color.Yellow;
		tabView.OverflowButtonSettings = overflowButtonSettings;