如何增加Ajax TabContainer控件中选项卡的高度和宽度？
这是我第一次使用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中包含高度和宽度，但它不适用于我。这真的很奇怪，我无法理解。
4 个答案:
答案 0 :(得分：3)
我实际上遇到了同样的问题并找到了这个解决方案，这需要将以下代码放在stylesheet.css中。
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height: 24px !important;
}
显然属性需要被标记为重要，这样我就可以增加标题高度，但是标签的主体会跳得很小。这意味着标题面板的标题和正文之间存在明显的中断。
因此，如果选项卡标题高度发生变化，我不确定选项卡控件是否始终是最佳解决方案。
答案 1 :(得分：1)
您是否尝试过以下方式：
<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>
以上代码很好地呈现：
答案 2 :(得分：0)
像这样写<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>
答案 3 :(得分：0)
这将更改Ajax选项卡背景颜色。您可以根据需要进行更改 根据您的需要，通过addattributes到“.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
相关问题
- 在TabContainer中定位选项卡
- 覆盖ASP.NET AJAX Control Toolkit的TabContainer控件中的默认CSS
- 如何增加Ajax TabContainer控件中选项卡的高度和宽度？
- 增加TabContainer标头的宽度
- 如何使用Ajax Control Toolkit TabContainer在选项卡之间切换？
- ajax tabcontainer不在IE8中呈现标签
- TabContainer多行标签与内容重叠
- 更改ajax tabcontainer选项卡的高度和宽度
- ng2-datetime - 增加控件的宽度
- ajaxToolkid：TabContainer：单击选项卡时显示一个框
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？