I am using ASP.NET Ajax control toolkit v3.5 TabContainer control. Anytime I use the style “float:left” my tab container “lets go” of the div’s it contains and all my content appears outside/disconnected from the tab control (there’s a black border around the tab area). Online, some people say setting “overflow:hidden” helps, but this doesn’t appear to work within the context of the TabContainer. Its all busted in FF and IE. Anybody know how to fix this?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabControl.aspx.cs" Inherits="WebApplication1.TabControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server"/>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="2">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<div>I'm all nice and pretty inside the tab</div><div>Me too I'm pretty inside tab, but I fall to the nextline.</div>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<div style="float:left;">This is messed up on float</div><div style="float:left;">Watch as I fall onto the line</div>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>
This one was a real pain. So, you can’t just add styling attributes to the TabContainer like “BorderStyle=0” because it just ignores them. Instead, have to specify a custom style class. Oh, and by the way this means you have to customize the entire Css style instead of overriding a single class!! Woot for good design!!
The good news is that you can download the source code for AJAX Control Toolkit and look for “Tabs.css”. This is the “default style” for TabContainer. Or, just copy all this code:
Now that you have the original CSS styling, you need to update the CSS to remove the
<%=WebResourcejunk and point it to your own images (I took the ones from the Ajax source code too. I searched the folder for a file called “tab-left.gif” and it pulled the folder containing all the images up.) You also need to change the “.ajax__tab_xp” to “.CustomTabStyle” or whatever name you specify as the CssClass attribute:I added “float:left” to “ajax__tab_body” and the float issue was gone, but it introduced an ugly gap between the tabs and the end of the content at the top. So I gave up on the border and set it to 0 pixels.
Here’s the final asp.net
Easy right? bleh…