Tab layout issue

2 posts, 0 answers
  1. Gavin
    Gavin avatar
    31 posts
    Member since:
    Sep 2012

    Posted 05 Jun 2012 Link to this post


    I have come across an issue with the layout of a tab strip on my page.  I have a menu div on the left side with a fixed height and a content div next to it.

    The issue is that the tabs appear at the bottom of the page instead of in the div st the top (see attached screen shot).

    Here is the code

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Tabstriptest._default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
      <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                    <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <telerik:RadScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <div style="width: auto;">
                <div style="width: 180px;height: 500px; float: left;background-color: Red;">Menu here</div>
                <div style="width: auto;margin-left: 190px;margin-right: 0px;">
                    <div style="width: 100%;background-color: Green;">
                        <telerik:RadToolBar ID="rtbVisitMenu" runat="server" Width="100%">
                            <telerik:RadToolBarButton runat="server" Text="New Visit">
                            <telerik:RadToolBarButton runat="server" Text="Edit Visit">
                            <telerik:RadToolBarButton runat="server" Text="Print">
                    <div style="width: 100%;background-color: Blue;">
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
                                <telerik:RadTab Text="tab 1" runat="server" PageViewID="RadPageView1" Selected="true"></telerik:RadTab>
                                <telerik:RadTab Text="tab 2" runat="server" PageViewID="RadPageView2"></telerik:RadTab>
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
                            <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true">RadPageView1</telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView2" runat="server">RadPageView2</telerik:RadPageView>

    Is this an issue with the tab strip of is there soem html/css I can use to get around this.



  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Jun 2012 Link to this post

    Hi Gavin,

    I tried the following CSS and it worked as expected
    <style type="text/css">
     .RadTabStripTop_Default .rtsLevel
       position: absolute !important;
       margin-top: -440px;
       position: absolute;

Back to Top