This is a migrated thread and some comments may be shown as answers.

TabStrip IsBreak property creates extra space and black square between tab rows in multi-row tab

2 Answers 59 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 31 Aug 2010, 04:29 PM
Hello!

We have an application which is using the 2010 Q2 RadControls, which uses a multi-row RadTabStrip and the Outlook Skin (applied via a theme)
When we set the IsBreak property to "True" for one of the tabs, we get an ugly visible spacer between the two tab rows. (see attached file tabstripwithspacer.png.

Here is the code that creates this tabstrip...

<telerik:RadTabStrip ID="tsTabs" Align="Left" runat="server" Width="750px" AutoPostBack="True" ReorderTabsOnSelect="True" SelectedIndex="0" >
               <Tabs>
                   <telerik:RadTab runat="server" Text="Main" ID="tabMain" />
                   <telerik:RadTab runat="server" Text="Addresses" ID="tabAddresses" />
                   <telerik:RadTab runat="server" Text="Phones" ID="tabPhones" />
                   <telerik:RadTab runat="server" Text="Notes" ID="tabNotes" />
                   <telerik:RadTab runat="server" Text="Quotes" ID="tabQuotes" />
                   <telerik:RadTab runat="server" Text="Remarket" ID="tabRemarket" />
                   <telerik:RadTab runat="server" Text="Research" ID="tabResearch" />
                   <telerik:RadTab runat="server" Text="Groups" ID="tabGroups" IsBreak="true" />
                   <telerik:RadTab runat="server" Text="Marketing" ID="tabMarketing" />
                   <telerik:RadTab runat="server" Text="Appts" ID="tabOtherInfo" />
                   <telerik:RadTab runat="server" Text="Files" ID="tabFiles" />
                   <telerik:RadTab runat="server" Text="PreSettlement" ID="tabPreSettlement" />
                   <telerik:RadTab runat="server" Text="Perms" ID="tabPermissions" />
                   <telerik:RadTab runat="server" Text="Admin" ID="tabAdmin" />
                   <telerik:RadTab runat="server" Text="Misc Info" ID="tabImportedInfo" />
                   <telerik:RadTab runat="server" Text="FedEx" ID="tabFedEx" />
               </Tabs>
               </telerik:RadTabStrip>

When we remove the IsBreak property (using the default of false), it looks fine (see tabstripnospacer.png) - but then the Reordertabsonselect property doesn't work (the selected tab is not on the "front" row).

Is there a way for me to get the selected tab in front without seeing the spacer made by setting the IsBreak property?

Thanks!



2 Answers, 1 is accepted

Sort by
0
Accepted
Cori
Top achievements
Rank 2
answered on 31 Aug 2010, 05:27 PM
Hello Paul,

Try adding this style and see if that helps.

li.rtsBreak
{
    list-style-type: none;
}

From looking at the css styling being applied to the break item, it just looks like they set the font-size to 0, to prevent it from showing, but don't prevent the bullet from showing.
0
Mike
Top achievements
Rank 1
answered on 31 Aug 2010, 06:34 PM
That was it!
THANK YOU!
Paul
Tags
TabStrip
Asked by
Mike
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Mike
Top achievements
Rank 1
Share this question
or