Question

我正在为asp.net使用AjaxToolkit的TabContainer控件但是当我在我的项目中使用它时它没有正确显示。我google了很多，但找不到合适的解决方案，请看下面的图片，请帮助我。 enter image description here

CODE：

<asp:TabContainer ID="TabContainer1" runat="server">
                <asp:TabPanel ID="tbpnluser" runat="server">
                    <HeaderTemplate>
                        Item Detail</HeaderTemplate>
                    <ContentTemplate>
                        <asp:Panel ID="itemDetailGrdPanel" runat="server">
                            <asp:GridView ID="grdItemDetail" runat="server" AutoGenerateColumns="False" OnRowCreated="gridView_RowCreated"
                                GridLines="None" OnRowDataBound="gridView_RowDataBound" CellPadding="4" ForeColor="#333333"
                                AllowPaging="True" PageSize="5" AutoGenerateSelectButton="True" >
                                <AlternatingRowStyle BackColor="White" />
                                <Columns>
                                    <asp:BoundField HeaderText="Item Code" DataField="ItemCode">
                                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
                                    </asp:BoundField>
                                    <asp:BoundField HeaderText="Item Description" DataField="ItemDescription">
                                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
                                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
                                    </asp:BoundField>
                                    <asp:BoundField HeaderText="Detail" DataField="ItemDetail">
                                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
                                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
                                    </asp:BoundField>
                                    <asp:BoundField HeaderText="Quantity" DataField="Quantity">
                                        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
                                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
                                    </asp:BoundField>
                                </Columns>
                                <EditRowStyle BackColor="#2461BF" />
                                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                <RowStyle BackColor="#EFF3FB" />
                                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                            </asp:GridView>
                        </asp:Panel>
                        <asp:Panel ID="itemDetailEditPanel" runat="server">
                            <table align="left" style="width: 187px">
                                <tr>
                                    <td>
                                    </td>
                                    <td align="left">
                                        Item Code:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtItemCode" runat="server" ReadOnly="True"></asp:TextBox>
                                    </td>
                                    <td>
                                        <asp:Button ID="btnFindItemCode" runat="server" Text="Find" />
                                    </td>
                                </tr>
                                <tr style="height:70px; vertical-align:top; ">
                                    <td>
                                    </td>
                                    <td  >
                                        Item Description:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtItemDescription" runat="server" Height="54px"></asp:TextBox>
                                    </td>

                                </tr>
                                <tr style=" vertical-align:top; ">
                                    <td>
                                    </td>
                                    <td  >
                                        Item Detail:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtItemDetail" runat="server" Height="23px"></asp:TextBox>
                                    </td>

                                </tr>
                                <tr style=" vertical-align:top; ">
                                    <td>
                                    </td>
                                    <td  >
                                        Quantity:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtQuantity" runat="server" Height="23px"></asp:TextBox>
                                    </td>

                                </tr>

                            </table>
                        </asp:Panel>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel ID="tbpnlusrdetails" runat="server">
                    <HeaderTemplate>
                        User Details</HeaderTemplate>
                    <ContentTemplate>
                        <asp:Panel ID="Panel1" runat="server">
                            <table align="center">
                                <tr>
                                    <td align="right" colspan="2">
                                    </td>
                                    <td>
                                        <b>User Details</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        UserName:
                                    </td>
                                    <td>
                                        <b>Suresh Dasari</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        FirstName:
                                    </td>
                                    <td>
                                        <b>Suresh</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        LastName:
                                    </td>
                                    <td>
                                        <b>Dasari</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        Email:
                                    </td>
                                    <td>
                                        <b>sureshbabudasari@gmail.com</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        Phone No:
                                    </td>
                                    <td>
                                        <b>1234567890</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        Location:
                                    </td>
                                    <td align="left">
                                        <b>Hyderabad</b>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </ContentTemplate>
                </asp:TabPanel>
                <asp:TabPanel ID="tbpnljobdetails" runat="server">
                    <HeaderTemplate>
                        Job Details</HeaderTemplate>
                    <ContentTemplate>
                        <asp:Panel ID="Panel2" runat="server">
                            <table align="center">
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                    </td>
                                    <td>
                                        <b>Job Details</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                        Job Type:
                                    </td>
                                    <td>
                                        <b>Software</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                        Industry:
                                    </td>
                                    <td>
                                        <b>IT</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                        Designation:
                                    </td>
                                    <td>
                                        <b>Software Engineer</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                        Company:
                                    </td>
                                    <td>
                                        <b>aspdotnet-suresh</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                        Phone No:
                                    </td>
                                    <td>
                                        <b>1234567890</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="right">
                                        Location:
                                    </td>
                                    <td align="left">
                                        <b>Hyderabad</b>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </ContentTemplate>
                </asp:TabPanel>
            </asp:TabContainer>

Answer 1

尝试使用（也）HeaderText属性：

<asp:TabPanel ID="tbpnluser" runat="server" HeaderText="Item Detail">
    <HeaderTemplate>
        Item Detail</HeaderTemplate>
    <ContentTemplate>

Answer 2

对于面板itemDetailEditPanel，请使用此标记：

<asp:Panel ID="itemDetailEditPanel" runat="server" style="display: table-cell;align: left;">
    <table style="width: 187px;">

Answer 3

我发现如果我的浏览器处于兼容模式，我会得到这个，但在标准模式下，它运行正常。在一堆黑客攻击之后，我发现了兼容模式的解决方法：

尝试将此添加到您的style代码：

    /* Deals with TabPanel height issue in Compatibility mode */
    .ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
    {
        height: 22px !important;
    }

!important会有所帮助，因为其他东西正在缩小高度，导致空白出现在下方。 !important确保您的代码优先。

AJAX :: Tabcontainer不能正确显示选项卡？

3 个答案: