RadTabStrip floating problem

[Thomas]

Hi, I got a two column layout on my Webpage:

Left        Right

Left:
<div id="left" style="width: 250px; background-color: White; float: left;"></div>

Right:
<div id="right" style="width: 620px; background-color: White; margin-left: 280px;">

When I put a TabStrip in "Right" it starts Rendering at the end of the content that is in "Left".
All other Telerik controls that I put in "Right" work as expected.

If I set "EnableEmbeddedBaseStyeSheet" to false it works .

Any ideas? I use 2012 Q3 SP2 controls.

Thanks in advance for your help

Thomas

[Magdalena]

Hi Thomas,

I noticed that you had submitted two identical tickets. In order to avoid duplication, I would like to ask you to continue our conversation in the other ticket. 

Regards,
Magdalena
Telerik

[Thomas]

Hi Magdalena,

Sorry about that.

But since I'm desperate for a solution I thought I also post the question in the public Forum.

[Magdalena]

Hello Thomas,

That's OK. Even though I will write the solution in this ticket too. If somebody has similar problem to could be helpful.

Here is the solution: this behavior is caused by the not cleared floating of the first div (with red border) so the second div (with green border) is floating around the first div.

However, the RadTabStrip control has clear floating property so it clears the floating of the first div. Because of it the TabStrib become under the bottom part of the first div. I would suggest you to add a floating of the div, where the RadTabStrip is placed in, in order to overcome the problematic behavior.

There is slightly modified the provided sample, implementing a possible approach in the attached files.

Regards,
Magdalena
Telerik

[Robert]

Hi magdalena

How can I make my tabs to appear in few rows? I applied few css float and no valuable outcome.

[Shinu]

Hi Robert,

You can set the IsBreak property of the RadTab to True so that it will be rendered in the next line. Please have a look into the following mark-up I tried.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip" runat="server" MultiPageID="RadMultiPage1"
    Width="300px" ReorderTabsOnSelect="true" Skin="WebBlue">
    <Tabs>
        <telerik:RadTab runat="server" Text="JSP" PageViewID="RadPageView1">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="ASP" PageViewID="RadPageView2">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="JSF" PageViewID="RadPageView3">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Java" PageViewID="RadPageView3" IsBreak="true">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="J2EE" PageViewID="RadPageView3">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="J2ME" PageViewID="RadPageView3" IsBreak="true">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="JSF" PageViewID="RadPageView3">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

Thanks,
Shinu.