如何增加Ajax TabContainer控件中选项卡的高度和宽度? [英] How to increase the hight and width of the tabs in the Ajax TabContainer control?
本文介绍了如何增加Ajax TabContainer控件中选项卡的高度和宽度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我第一次使用Ajax Toolkit for ASP.NET.我正在使用TabContainer，它是一个非常出色的控件.我遵循了AJAX工具包网站上的描述，除某些样式问题外，其他一切都对我有效.
TabContainer具有以下CSS样式.我现在在选项卡中有问题.我想在标签本身的标题或标题之外添加一个小图标或图像.我是这样做的，但是现在文本掉下来了，并且没有完全显示出来，因此读者无法阅读它. **所以您能帮我修复它吗?**
CSS样式:
This is my first time to play with Ajax Toolkit for ASP.NET. I am using the TabContainer which is a very awesome control. I followed the description in the website of the AJAX toolkit and everything works well with me except some styling issues.
I have the following CSS style for the TabContainer. I have a problem now in the tabs. I want to add a small icon or image besides the title or the header of the tab itself. I did it but now the text goes down and it doesn''t appear completely, so the reader can''t read it. **So could you please help me in fixing it?**
CSS style:
/* 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代码:
Here''s the ASP.NET code:
<%--TabContainer Control--%>
<ajaxToolkit:TabContainer ID="LibraryTabs" runat="server" CssClass="ajax__myTab" önDemand="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>
<img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery: <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>
<img src="images/New/video.png" style="height: 21px; width: 23px" /> Video Gallery: <br />
Here''s a list of safety videos that show you the effects of driving out of the speed limit and so on.
<center> Coming Soon </center>
</p>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
推荐答案
TabPanel具有height和width属性.用px
给他们分配数值
TabPanels have height and width properties. Assign them the numeric values with px
<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>
这篇关于如何增加Ajax TabContainer控件中选项卡的高度和宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
