[Resolvido] TabContainer só funciona direito no IE?

[Henrique Gouvêa 0]

Pessoal, estou com problemas com TabContainer. No IE ele tá certinho, mas nos outros - Firefox, Chrome, Safari...todos nas versões mais recentes - não aparece as bordas nem as abas. Fica apenas o conteúdo das TabPanels. As abas estão apenas em texto, nem parece que é uma aba. Essa TabContainer está dentro de uma página em um iFrame que estou chamando num javascript.

 

Se alguém tiver alguma sujestão, desde já agradeço.

[William Bruno 1501]

seu problema aparentemente é com css

 

siga as instruções do post #2:

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__findpost__p__1613498

[Jack Jim 0]

O arquivo javascript responsável por construir estas abas está sendo chamado no arquivo que invoca o iframe? Ou está dentro do iframe?

Se está dentro do iframe, a chamada do javascript está sendo feita no header? ou no body?

 

Obrigado,

[Henrique Gouvêa 0]

Estou usando o AjaxControlToolKit no Visual Studio. Ele está dentro do iframe no body de um user control. No iframe eu chamo uma página .aspx que chama um user control .ascx. Segue abaixo o código ASP.NET dentro do user control:

 

<div class="productdetails">
       <ajaxToolkit:TabContainer runat="server" ID="ProductsTabs" Height="112px" ScrollBars="Vertical">
           <ajaxToolkit:TabPanel runat="server" ID="pnlDescription" TabIndex="1" HeaderText="Descrição" Visible="true">
               <ContentTemplate>
                   <asp:Literal runat="server" ID="lFullDescription" />
               </ContentTemplate>
           </ajaxToolkit:TabPanel>
           <ajaxToolkit:TabPanel runat="server" ID="pnlPrazoEntrega" TabIndex="2" HeaderText="Prazo de entrega">                
               <ContentTemplate>
                   <asp:UpdateProgress runat="server" AssociatedUpdatePanelID="updatePanel">
                       <ProgressTemplate>Atualizando informações...</ProgressTemplate>
                   </asp:UpdateProgress>
                   <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">                        
                       <ContentTemplate>
                           <asp:Panel runat="server" ID="phShippingMethods">
                               <table>
                                   <tr>
                                       <td>
                                           <%=GetLocaleResourceString("EstimateShipping.ZipPostalCode")%>
                                       </td>
                                       <td>
                                           <nopCommerce:SimpleTextBox runat="server" ID="txtZipPostalCode" ValidationGroup="EstimateShipping"
                                                   ErrorMessage="<% $NopResources:EstimateShipping.ZipPostalCodeIsRequired %>">
                                           </nopCommerce:SimpleTextBox>
                                       </td>
                                       <td>                                        
                                       </td>
                                       <td>
                                           <asp:ImageButton runat="server" ID="btnGetQuote" OnClick="btnGetQuote_Click" ValidationGroup="EstimateShipping" />
                                       </td>
                                   </tr>
                               </table>
                               <div class="clear" />
                               <asp:DataList runat="server" ID="dlShippingOptions" EnableViewState="false">
                                 <ItemTemplate>
                                   <div class="shipping-option-item"><br />
                                       <div class="option-name">
                                           <%#Server.HtmlEncode(Eval("Name").ToString()) %>
                                           <%#Server.HtmlEncode(FormatShippingOption(((ShippingOption)Container.DataItem)))%>
                                       </div>
                                       <div class="option-description">
                                           <%#Eval("Description") %>
                                       </div>
                                   </div>
                                 </ItemTemplate>
                               </asp:DataList>
                           </asp:Panel>
                       </ContentTemplate>
                   </asp:UpdatePanel>
               </ContentTemplate>
           </ajaxToolkit:TabPanel>
       </ajaxToolkit:TabContainer>
   </div>

[Henrique Gouvêa 0]

Resolvi o problema com CSS mesmo, como disse o William. Bastou usar as classes:

 

.grey .ajax__tab_header
{
}

.grey .ajax__tab_header .ajax__tab_outer
{
}

.grey .ajax__tab_header .ajax__tab_inner
{
}

.grey .ajax__tab_hover .ajax__tab_inner,.block-info .listbox ul li
{
}

.grey .ajax__tab_active .ajax__tab_outer
{
}

.grey .ajax__tab_active .ajax__tab_inner
{
}

.grey .ajax__tab_body
{
}

Não precisei nem implementar. Ficou desse jeito mesmo.