How to increase the hight and width of the tabs in the Ajax TabContainer control?

Question

4.00/5 (1 vote)

See more:

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

/* 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; }

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>

Posted 20-Jul-12 4:02am

essence2012

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

bbirajdar · Accepted Answer · 2012-07-20T04:48:00

TabPanels have height and width properties. Assign them the numeric values with px

ASP.NET

<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>