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

Tab layout issue

1 Answer 80 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Gavin
Top achievements
Rank 1
Gavin asked on 05 Jun 2012, 11:36 PM

Hi,

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <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" />
            </Scripts>
        </telerik:RadScriptManager>
    <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%">
                    <Items>
                        <telerik:RadToolBarButton runat="server" Text="New Visit">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Edit Visit">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton runat="server" Text="Print">
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
                </div>
                <div style="width: 100%;background-color: Blue;">
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
                        <Tabs>
                            <telerik:RadTab Text="tab 1" runat="server" PageViewID="RadPageView1" Selected="true"></telerik:RadTab>
                            <telerik:RadTab Text="tab 2" runat="server" PageViewID="RadPageView2"></telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <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>
                    </telerik:RadMultiPage>
                </div>
            </div>
        </div>
  </form>
</body>
</html>

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

Thanks

Gavin.

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 06 Jun 2012, 10:50 AM
Hi Gavin,

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

Thanks,
Princy.
Tags
TabStrip
Asked by
Gavin
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Share this question
or