div float:left-style innerhalb einer asp-TabContainer
Ich bin mit ASP.NET Ajax control toolkit v3.5 TabContainer Kontrolle. Immer wenn ich mit dem style "float:left" my tab " container "lets go" von den div ' s, die es enthält und alle meine Inhalte angezeigt, die sich außerhalb von/getrennt vom tab-Steuerelement (es gibt einen schwarzen Rahmen um den tab-Bereich). Online, einige Leute sagen, die Einstellung "overflow:hidden" hilft, aber das scheint nicht zu funktionieren im Rahmen der TabContainer. Alle seine busted in FF und IE. Weiß jemand wie man dieses Problem beheben?
<%@ 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>
InformationsquelleAutor P.Brian.Mackey | 2010-09-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das war eine echte Schmerzen. So, Sie können nicht einfach hinzufügen styling-Attribute den TabContainer wie "BorderStyle=0", da es einfach ignoriert Sie. Stattdessen müssen Sie einen benutzerdefinierten Stil Klasse. Oh, und übrigens, das heißt, Sie müssen passen Sie die gesamten Css-style statt überschreiben einer einzelnen Klasse!! Woot für gutes design!!
Die gute Nachricht ist, können Sie den Quellcode herunterladen für AJAX Control Toolkit, und suchen Sie nach "Tabs.css". Dies ist die "Standard-Stil" für TabContainer. Oder, einfach kopieren Sie diesen code:
Nun, dass Sie die original-CSS-styling, müssen Sie zum aktualisieren der CSS zu entfernen, die
<%=WebResource
junk und verweisen Sie auf Ihre eigenen Bilder (ich nahm den aus der Ajax-source-code zu. Ich durchsucht den Ordner nach einer Datei namens "tab-left.gif" und er zog den Ordner mit allen Bildern.) Sie müssen auch zu ändern ".ajax - __tab_xp" zu ".CustomTabStyle" oder was auch immer Namen, den Sie angeben, wie das Attribut CssClass:Fügte ich "float:left" zu "ajax - __tab_Körper" und das float-Problem Weg war, aber es führte eine hässliche Lücke zwischen den tabs und das Ende des Inhalts an der Spitze. So gab ich an der Grenze und legen Sie es auf 0 Pixel.
Hier das Finale asp.net
Einfach, oder? bleh...
InformationsquelleAutor P.Brian.Mackey
Wenn ich mich Recht erinnere, ich habe gesehen, Elemente schweben außerhalb Ihres übergeordneten Containers in bestimmten Browsern, wenn das übergeordnete element nicht über einen float-Wert eingestellt. Das ist ein bisschen ein Schuss ins Blaue, aber ich würde empfehlen, hinzufügen
style="float:inherit"
oderstyle="float:left"
auf das div um die Registerkarte container.Hoffe, das hilft...
Haben Sie versucht, die Lösungen in: stackoverflow.com/questions/218760/... ? Meine Vermutung ist, dass letztlich ein ähnliches Problem...
InformationsquelleAutor joe.liedtke