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"> <html xmlns="http://www.w3.org/1999/xhtml"> <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
0
Princy
Top achievements
Rank 2
Rank 2
answered on 06 Jun 2012, 10:50 AM
Hi Gavin,
I tried the following CSS and it worked as expected
CSS:
Thanks,
Princy.
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.