Tab separator | Infragistics Forums

2254

Tab separator

Alexandru posted over 12 years ago

Hello .

Using Infragistics 2011 Vol.2

I am switching from the classic igtab:UltraWebTab control to the new ig:WebTab control

Please allow me a newbie question: where is the TabSeparator ?

I want to migrate exactly the current appearance , screen capture is attached.

I am reading the local help installed on my computer and the discussions here too,but any help is appreciated.

Thank you

P.S. Meanwhile I have found the answer myself by looking around this forum

The C# MarginTrailing Property get/sets margin between this tab item and next.

That defines space/separator between tab items.

Can this property be set in .css ?

Parents

49378

[Infragistics] Petar Ivanov posted over 12 years ago

Hi mateia,

Thank you for posting in the community.

Separators may be set in WebTab through CSS by setting the CSSClass in the TabCSSClasses of a tab. For instance:


    <style type="text/css">
        .addMargin 
        {
             margin-left:10px;
             margin-right:10px;
        }
    
    </style>
        <ig:ContentTabItem runat="server" Text="Tab 3" >
            <TabCssClasses CssClass="addMargin" />
        </ig:ContentTabItem>

Please let me know if this helps.

265

shehla posted over 12 years ago in reply to [Infragistics] Petar Ivanov

Hi

How can I get tooltip to work for each tab?

I want screen reader to say which tab they are on. Hitting enter does display its content but I want to give audio instruction on each tab selected.

Please help.

Thanks

shehla
Cancel
Reply

Cancel

Reply

24497

[Infragistics] Viktor Snezhko posted over 12 years ago in reply to shehla

Hi Shehla,

The tab-item has property ToolTip which is applied to tab-label.

        <ig:WebTab ID="WebTab1" runat="server" ...>
            <Tabs>
                <ig:ContentTabItem runat="server" Text="Tab 1" ToolTip="This is tab1">
                     ...
                </ig:ContentTabItem>
                ...
            </Tabs>
        </ig:WebTab>
Cancel
Reply

Cancel

Children

24497

[Infragistics] Viktor Snezhko posted over 10 years ago in reply to Nikolay Alipiev

Hi Renuk,

If you ask about properties available for UltraWebTab, then custom image for tab-separator can be set by exactly same property as image for tab-item: DefaultImage. Since tab-separator does not support states (hover/selected/disabled), state-images are not available for separator. In order to customize properties of tabs and tab separators, I suggest you to use visual-designer-dialog for Tabs property of UltraWebTab.
Below is example to set image for separator:

<igtab:UltraWebTab ID="UltraWebTab1" runat="server">
<Tabs>
    <igtab:Tab Text="New Tab"></igtab:Tab>
    <igtab:TabSeparator DefaultImage="./images/arrow.gif"></igtab:TabSeparator>
    <igtab:Tab Text="New Tab"></igtab:Tab>
</Tabs>
</igtab:UltraWebTab>
Cancel
Reply

Cancel
4315

Offline Nikolay Alipiev posted over 10 years ago in reply to Renu
Hi, Renuk.

I don't think WebTab have such a functionality. But I think you can use some of the "TabCssClasses" of the "ContentTabItem" and achieve similar effect. You can see the list of properties that are available.

Code Snippet

<ig:WebTab ID="WebTab1" runat="server" Height="150px" Width="620px">

        <Tabs>

            <ig:ContentTabItem runat="server">

                <TabCssClasses ImageCssClass="ClientTabs" ...../>

            </ig:ContentTabItem>

....

        </Tabs>

I will wait for your feedback.

Best regards,
Nikolay Alipiev
- WebTab.png
- View
- Hide
Cancel
Reply

Cancel
465

Renu posted over 10 years ago in reply to [Infragistics] Viktor Snezhko

Hello,

How do i get a TabSeparator image in a WebTab?

<Tabs>

<igtab:TabSeparatorTag="preset">

<StyleWidth="20px"></Style>

</igtab:TabSeparator>
Cancel
Reply

Cancel