This is a migrated thread and some comments may be shown as answers.
RadTabStrip floating problem
5 Answers 29 Views
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 02 Jul 2013, 03:39 PM
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

5 Answers, 1 is accepted

Sort by
0
Accepted
Magdalena
Telerik team
answered on 03 Jul 2013, 03:58 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Thomas
Top achievements
Rank 1
answered on 03 Jul 2013, 04:56 PM
Hi Magdalena,

Sorry about that.

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

0
Magdalena
Telerik team
answered on 04 Jul 2013, 10:37 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Robert
Top achievements
Rank 1
answered on 23 Jul 2013, 08:37 AM
Hi magdalena

How can I make my tabs to appear in few rows? I applied few css float and no valuable outcome.
0
Shinu
Top achievements
Rank 1
answered on 23 Jul 2013, 11:11 AM
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.
Asked by
Thomas
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Thomas
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or