div float: левый стиль внутри asp TabContainer

Я использую ASP.NET Ajax control toolkit v3.5 TabContainer control. В любое время, когда я использую стиль «float: left», мой контейнер табуляции «позволяет перейти» к содержащемуся в нем элементу div, и все мое содержимое появляется вне/отключено от элемента управления вкладки (там есть черная рамка вокруг области вкладок). В Интернете некоторые говорят, что установка «переполнения: скрытая» помогает, но это, похоже, не работает в контексте TabContainer. Его все в BF и IE. Кто-нибудь знает, как это исправить?div float: левый стиль внутри asp TabContainer

<%@ 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>

источник

2010-09-16 P.Brian.Mackey

Это была настоящая боль. Таким образом, вы не можете просто добавлять атрибуты стиля в TabContainer, например «BorderStyle = 0», потому что он просто игнорирует их. Вместо этого нужно указать собственный класс стиля. О, и, кстати, это означает, что вам нужно настроить весь стиль Css вместо того, чтобы переопределить один класс! Woot для хорошего дизайна!

Хорошей новостью является то, что вы можете загрузить исходный код для AJAX Control Toolkit и искать «Tabs.css». Это стиль по умолчанию для TabContainer. Или просто скопировать весь этот код:

/* default layout */ 
.ajax__tab_default .ajax__tab_header {white-space:nowrap;} 
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block} 
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block} 
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block} 

/* xp theme */ 
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;} 
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;} 
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;} 
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;} 
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;} 
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;} 
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;} 
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;} 
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;} 
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;} 
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;} 

/* scrolling */ 
.ajax__scroll_horiz {overflow-x:scroll;} 
.ajax__scroll_vert {overflow-y:scroll;} 
.ajax__scroll_both {overflow:scroll} 
.ajax__scroll_auto {overflow:auto}

Теперь, когда у вас есть оригинальный CSS стиль, вам нужно обновить CSS, чтобы удалить <%=WebResource мусор и направить его в ваших собственных изображений (я взял те из Ajax Исходный код. Я искал папку для файла с именем «tab-left.gif», и он вытащил папку, содержащую все изображения вверх.) Вам также нужно изменить «.ajax__tab_xp» на «.CustomTabStyle» или какое бы имя вы ни выбрали указать в качестве атрибута CssClass:

/* default layout */ 
.ajax__tab_default .ajax__tab_header {white-space:nowrap;} 
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block} 
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block} 
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block} 

/* xp theme */ 
.CustomTabStyle .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;} 
.CustomTabStyle .ajax__tab_outer {padding-right:4px;background:url('../images/Tabs/tab-right.gif') no-repeat right;height:21px;} 
.CustomTabStyle .ajax__tab_inner {padding-left:3px;background:url('../images/Tabs/tab-left.gif') no-repeat;} 
.CustomTabStyle .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url('../images/Tabs/tab.gif') repeat-x;} 
.CustomTabStyle .ajax__tab_hover .ajax__tab_outer {background:url('../images/Tabs/tab-hover-right.gif') no-repeat right;} 
.CustomTabStyle .ajax__tab_hover .ajax__tab_inner {background:url('../images/Tabs/tab-hover-left.gif') no-repeat;} 
.CustomTabStyle .ajax__tab_hover .ajax__tab_tab {background:url('../images/Tabs/tab-hover.gif') repeat-x;} 
.CustomTabStyle .ajax__tab_active .ajax__tab_outer {background:url('../images/Tabs/tab-active-right.gif') no-repeat right;} 
.CustomTabStyle .ajax__tab_active .ajax__tab_inner {background:url('../images/Tabs/tab-active-left.gif') no-repeat;} 
.CustomTabStyle .ajax__tab_active .ajax__tab_tab {background:url('../images/Tabs/tab-active.gif') repeat-x;} 
.CustomTabStyle .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:0px solid #999999;border-top:0;padding:8px;background-color:#ffffff;float:left;} 

/* scrolling */ 
.ajax__scroll_horiz {overflow-x:scroll;} 
.ajax__scroll_vert {overflow-y:scroll;} 
.ajax__scroll_both {overflow:scroll} 
.ajax__scroll_auto {overflow:auto}

Я добавил «float: left» в «ajax__tab_body», и проблема с поплавком исчезла, но в нем появился уродливый разрыв между вкладками и концом содержимого вверху. Поэтому я сдался на границе и установил его в 0 пикселей.

Вот окончательный asp.net

<%@ 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"> 
    <link href="css/Site.css" rel="stylesheet" type="text/css" /> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div style="float:inherit;"> 
    <asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server"/> 
     <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="2" CssClass="CustomTabStyle"> 
      <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="width:100px;">This is messed up on float<div style="float:left;">Watch as I fall onto the line</div></div> 

      </ContentTemplate> 
      </asp:TabPanel> 
     </asp:TabContainer> 
    </div> 
    </form> 
</body> 
</html>

Легкое право? bleh ...

источник

2010-09-16 21:38:13

Если я правильно помню, я видел элементы плавать вне их родительского контейнера в некоторых браузерах, когда родительский элемент не имеет значения, установленного с плавающей точкой. Это немного выстрел в темноте, но я бы рекомендовал добавить style="float:inherit" или style="float:left" в div вокруг контейнера табуляции.

Надеюсь, что это поможет ...

источник

2010-09-16 20:26:26

Я просто попробовал оба. Это не повлияло на IE или FF. –

Вы пробовали решения в: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing? Я предполагаю, что это, в конечном счете, аналогичная проблема ... –

div float: левый стиль внутри asp TabContainer

ответ

Смежные вопросы