Reputation: 47
How to increase the hight and width of the tabs in the Ajax TabContainer control?
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; }
Sorry because I could not be able to upload snapshot due to the low number of points I have.
UPDATE:
Here's the ASP.NET code:
<%--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>
UPDATE 2: Also, I tried to include the Height and Width inside the AjaxToolkit:TabPanel and it didn't work with me. It is really strange and I could not understand it.
Upvotes: 1
Views: 19462
Answers (4)
Reputation: 1809
This will change Ajax Tab Background Colors . You can make changes according to your need, by addattributes to ".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]: https://i.sstatic.net/04quM.png
Upvotes: 0
Reputation: 582
Have you tried doing this following way :
<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>
The above code renders nicely:
good luck!
Upvotes: 1
Reputation: 491
I actually had the same issue and found this solution, which requires to put the following code in the stylesheet.css.
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height: 24px !important;
}
So apparently the attribute needs to be marked as important, this way i was able to increase the header height, however the body of the tabs will jump down quite a little. Meaning there is visible break between the header and the body of the tab panel.
So i am not sure if a tab control is always the best solution if the tab headers height will change.
Upvotes: 3
Reputation: 171
write like this <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>
Upvotes: 0
Related Questions
- Increase Width and Height of Headers in TabControl
- CF - TabControl - how to make the tabs bigger?
- Add a Css Class to Ajax Tab Container In C#
- Set Ajax Tab Container Width to 100%
- change ajax tabcontainer tabs height and width
- How to style controls in ASP.NET AJAX TabControl
- TabContainer multiline tabs overlap with content
- Overriding Default CSS in ASP.NET AJAX Control Toolkit's TabContainer Control
- How can I set child tab height in a nested ajax asp.net tab?
- ASP.AJAX TabContainer/TabPanel Customisation