Version

Handling Overflow in WebTab

Tabs Overflow

WebTab™ provides you with an option to reduce the width of the tabs in case of overflow. You can easily achieve this by setting the control’s TabsOverflow property to Reduce.

Note
Note:

This property takes effect only when the following three conditions are met:

  • TabOrientation is set to horizontal.

  • DisplayMode is set to SingleRow or MultiRow.

  • Size of WebTab is set.

In HTML:

<ig:WebTab ID="WebTab1" runat="server" Height="515px"
             Width="500px" TabsOverflow="Reduce" >
            <Tabs>
                …
            </Tabs>
</ig:WebTab>

In Visual Basic:

WebTab1.TabsOverflow = TabsOverflow.Reduce

In C#:

WebTab1.TabsOverflow = TabsOverflow.Reduce;

Text Overflow

There may be situations where the content of the tab header may not be visible entirely because of less width. To overcome this situation you can provide your end users with an option to click an ellipsis button to show the header content when it is clicked. You can set this feature by setting the control’s TextOverflow property to Ellipsis.

Note
Note:

TextOverflow property has effect only when the tab orientation is set to horizontal. However this property is not supported for those tab items which contain html tags (inner elements).

In HTML:

<ig:WebTab ID="WebTab1" runat="server" Height="515px"
             Width="659px"  TextOverflow="Ellipsis" >
            <Tabs>
                …
            </Tabs>
</ig:WebTab>

In Visual Basic:

WebTab1.TextOverflow = TabTextOverflow.Ellipsis

In C#:

WebTab1.TextOverflow = TabTextOverflow.Ellipsis;