如何增加 Ajax TabContainer 控件中选项卡的高度和宽度？

Question

这是我第一次使用 Ajax Toolkit for ASP.NET。我正在使用 TabContainer，这是一个非常棒的控件。我遵循了 AJAX 工具包网站上的描述，除了一些样式问题外，一切都对我很好。 我有 TabContainer 的以下 CSS 样式。我现在在选项卡中遇到问题。我想在标签本身的标题或标题之外添加一个小图标或图像。我这样做了，但现在文本下降了，并且没有完全显示出来，所以读者无法阅读。 那么你能帮我解决它吗？

CSS 样式：

/* CSS Style of the Ajax TabContainer */
.ajax__myTab .ajax__tab_header { font-family: verdana; font-size: 16px; border-bottom: solid 2px #aaaaaa } 
.ajax__myTab .ajax__tab_outer { padding-right: 2px; height: 20px; background-color: #C0C0C0; margin-right: 1px; border-right: solid 2px #666666; border-top: solid 1px #999999 } 
.ajax__myTab .ajax__tab_inner { padding-left: 3px; background-color: #C0C0C0; }
 .ajax__myTab .ajax__tab_tab { height: 13px; padding: 4px; margin: 0; } 
 .ajax__myTab .ajax__tab_hover .ajax__tab_outer { background-color: #cccccc }
  .ajax__myTab .ajax__tab_hover .ajax__tab_inner { background-color: #cccccc }
   .ajax__myTab .ajax__tab_hover .ajax__tab_tab { background-color:Green; } 
   .ajax__myTab .ajax__tab_active .ajax__tab_outer { background-color: #fff; border-left: solid 1px #999999; }
    .ajax__myTab .ajax__tab_active .ajax__tab_inner { background-color:#fff; } 
    .ajax__myTab .ajax__tab_active .ajax__tab_tab { }
     .ajax__myTab .ajax__tab_body { font-family: verdana; font-size: 11pt; border: 2px solid #999999; padding: 6px; background-color: #ffffff; }

抱歉，由于我的积分太少，我无法上传快照。

更新：

这是 ASP.NET 代码：

<%--TabContainer Control--%>
    <ajaxToolkit:TabContainer ID="LibraryTabs" runat="server" CssClass="ajax__myTab" OnDemand="true" AutoPostBack="false" 
                                TabStripPlacement="Top" ScrollBars="None" UseVerticalStripPlacement="false">
        <ajaxToolkit:TabPanel ID="ImagesGallery" runat="server" HeaderText="Images Gallery">
        <HeaderTemplate><img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery</HeaderTemplate>
        <ContentTemplate>
            <p>
                <strong><img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery: </strong> <br />
                Here's a list of some images of safety events that take place inside the company. Besides that, there are some images of 
                some safety equipments or signs. If the image is not obvious to you, please save it on your PC and then open it to see it in its
                original size. 
            </p>
            <!-- Images Gallery -->
            <div id="gallery" class="ad-gallery">

                <div class="ad-image-wrapper">
                </div>

                <div class="ad-controls">
                </div>

                <div class="ad-nav">
                    <div class="ad-thumbs">
                        <ul class="ad-thumb-list">
                            <li>
                                <a href="images/safety images/fire protection.jpg">
                                    <img src="images/safety images/thumbs/fire protection.jpg" title="Fire Protection Training Course" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/safety equipment.jpg">
                                    <img src="images/safety images/thumbs/safety equipment.jpg" title="One of the safety equipments" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster.jpg">
                                    <img src="images/safety images/thumbs/lp poster.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster 2.jpg">
                                    <img src="images/safety images/thumbs/lp poster 2.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster 3.jpg">
                                    <img src="images/safety images/thumbs/lp poster 3.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/lp poster 4.jpg">
                                    <img src="images/safety images/thumbs/lp poster 4.jpg" title="Safety Poster" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/worker.jpg">
                                    <img src="images/safety images/thumbs/worker.jpg" title="Safety at workplace" class="image0">
                                </a>
                            </li>

                            <li>
                                <a href="images/safety images/safety sign.jpg">
                                    <img src="images/safety images/thumbs/safety sign.jpg" title="One of the safety signs" class="image0">
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- End of Images Gallery -->
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Images Gallery">
        <HeaderTemplate>Video Gallery</HeaderTemplate>
        <ContentTemplate>
            <p>
            <strong><img src="images/New/video.png" style="height: 21px; width: 23px" /> Video Gallery: </strong> <br />
            Here's a list of safety videos that show you the effects of driving out of the speed limit and so on.
            <center><b> Coming Soon </b></center>
            </p>
        </ContentTemplate>
        </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

更新 2： 另外，我尝试在 AjaxToolkit:TabPanel 中包含高度和宽度，但它对我不起作用。真的很奇怪，看不懂。

Answer 1

其实我也遇到了同样的问题，找到了这个解决方案，需要在 stylesheet.css 中加入以下代码。

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
{
    height: 24px !important;
}

显然该属性需要标记为重要，这样我就能够增加标题高度，但是选项卡的主体会向下跳很多。这意味着标签面板的标题和正文之间存在明显的中断。

所以我不确定如果选项卡标题的高度会改变，选项卡控件是否总是最好的解决方案。

Answer 2

您是否尝试过以下方式：

      <ajaxToolkit:TabContainer ID="mytabs" runat="server" >
            <ajaxToolkit:TabPanel runat="server" ID="tab1">
                <HeaderTemplate>
                    <div style="float: left;">
                        <img src="images/accept.png" /></div>
                    <div style="float: right; padding-left: 5px;">Accept</div>
                </HeaderTemplate>
                <ContentTemplate>some content for tab1</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="tab2">
                <HeaderTemplate>
                    <div style="float: left;">
                        <img src="images/add.png" /></div>
                    <div style="float: right; padding-left: 5px;">Add</div>
                </HeaderTemplate>
                <ContentTemplate>some content for tab2</ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>

上面的代码渲染得很好：

祝你好运！

Answer 3

这样写<ajaxtoolkit:tabcontainer runat="server" xmlns:ajaxtoolkit="#unknown"> OnClientActiveTabChanged="ClientFunction" Height="150px" Width="400px" ActiveTabIndex="1"
OnDemand="true"
AutoPostBack="false" TabStripPlacement="Top" CssClass="ajax__tab_xp" ScrollBars="None" UseVerticalStripPlacement="true" VerticalStripWidth="120px" > <ajaxtoolkit:tabpanel runat="server"> HeaderText="Signature and Bio" Enabled="true" ScrollBars="Auto"
OnDemandMode="Once" <contenttemplate> ... </contenttemplate> /> </ajaxtoolkit:tabpanel></ajaxtoolkit:tabcontainer>

Answer 4

这将改变 Ajax 选项卡背景颜色。您可以根据需要进行更改 根据您的需要，通过将属性添加到“.divTab”

    .divTab
    {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        padding: 3px 10px 2px 10px;
    }

    .divTab:hover
    {
        color: #c8ccd0;
    }

    .MyTabStyle .ajax__tab_header
    {
        cursor: pointer;
        font-weight: bold;
        display: block;
    }
    .MyTabStyle .ajax__tab_header .ajax__tab_outer
    {
        border-color: #4597d1;
        color: #ffffff;
        margin-left: 1px;
        border: 1px solid black;
        background-color: #4597d1;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .MyTabStyle .ajax__tab_header .ajax__tab_outer1
    {
        border-color: #4597d1;
        color: #ffffff;
        padding-left: 2px;
        margin-right: 3px;
        border: 1px solid black;
        background-color: white;
    }
    .MyTabStyle .ajax__tab_header .ajax__tab_inner
    {
        border-color: #666;
        color: #ffffff;
    }
    .MyTabStyle .ajax__tab_hover .ajax__tab_outer
    {
        background-color: #2158a0;
    }
    .MyTabStyle .ajax__tab_hover .ajax__tab_inner
    {
        color: #ffffff;
    }
    .MyTabStyle .ajax__tab_active .ajax__tab_outer
    {
        border-bottom-color: #2b5f9a;
        background-color: #2158a0;
        color: #2158a0;
    }
    .MyTabStyle .ajax__tab_active .ajax__tab_inner
    {
        color: #ffffff;
        border-color: #333;
    }
    .MyTabStyle .ajax__tab_body
    {
        font-family: verdana,tahoma,helvetica;
        font-size: 10pt;
        background-color: #fff;
        border-top-width: 0;
        border: solid 1px #d7d7d7;
        border-top-color: #ffffff;
    }

    -------------------------------------------------------------------
     <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="MyTabStyle">
        <asp:TabPanel ID="TabPricing" runat="server" HeaderText="Pricing">
            <HeaderTemplate>
                <div class="divTab" style="background-color: #2b5f9a;">
                    <asp:Label ID="lblPricing" runat="server" Text="Pricing"></asp:Label></div>
            </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabDesign" runat="server" HeaderText="Design Specs">
            <HeaderTemplate>
                <div class="divTab" style="background-color: #ac416c;">
                    <asp:Label ID="lblDesignSpecs" runat="server" Text="Design Specs"></asp:Label></div>
            </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="Tab_Fab" runat="server" HeaderText="Fab Specs">
            <HeaderTemplate>
                <div class="divTab" style="background-color: #979444;">
                    <asp:Label ID="Label1" runat="server" Text="Fab Specs"></asp:Label></div>
            </HeaderTemplate>
            <ContentTemplate>
            </ContentTemplate>
        </asp:TabPanel>
    </asp:TabContainer>


  [1]: http://i.stack.imgur.com/04quM.png