RadTabStrip floating problem

6 posts, 1 answers
  1. Thomas
    Thomas avatar
    30 posts
    Member since:
    Aug 2010

    Posted 02 Jul 2013 Link to this post

    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
  2. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 03 Jul 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thomas
    Thomas avatar
    30 posts
    Member since:
    Aug 2010

    Posted 03 Jul 2013 Link to this post

    Hi Magdalena,

    Sorry about that.

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

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 04 Jul 2013 Link to this post

    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.
  6. Robert
    Robert avatar
    12 posts
    Member since:
    May 2013

    Posted 23 Jul 2013 Link to this post

    Hi magdalena

    How can I make my tabs to appear in few rows? I applied few css float and no valuable outcome.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jul 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017