If you’ll ask all the ASP.Net developers on what control they want Microsoft to create and include freely, I bet that Tab Control is in the top 5 list. Well, now our dreams finally came true. With the released ASP.Net AJAX last January 2007, the ASP.Net AJAX Team included 4 new controls that are not in their RC1 and Tab Control is one of them (others are AutoComplete, Calendar, MaskedEdit).
Now I am currently involved in a web application development that is deeply in need of tab-based navigation to greatly improve the page’s user friendliness. We downloaded and installed that AJAXToolkit from ASP.Net site, plugged it in one of your page, provided it’s required and necessary properties saved the file and refreshed the page. Our fingers were crossed with be waited for the progress bar to reached it’s maximum length and after the page was rendered, this is what we saw.
Not what we expected right?
Cause
Since the release of ASP.Net 2.0, all the pages’ DTD are set to XHTML 1.0 Transitional by default. Consequently, AJAX Control Toolkits were also created to adhere with standard. All the rendered AJAX controls will follow the said document type definition. As it turns out, our page only adhere to HTML 4.01 Transitional DTD making the tab looked distorted.
Solution
Well one solution it to change the DTD of your page to XHTML 1.0 Transitional. This will quickly fixed your problem (best practice as well). But if time is not in your side you can do a little CSS hack to make your tab looking good again. Just include the CSS code below internally inside your page:
<style type=”text/css”>
.ajax__tab_default .ajax__tab_inner {height : 100%;}
.ajax__tab_default .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_tab {height:100%}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {height : 100%;}
</style>
Voila. Just remember that the CSS should be inside your .aspx file and not in an external .css file. The style will not take effect in doing so.
Wonderful, you say “change the DTD of your page to XHTML 1.0 Transitional” but you forgot to mention how the heck to do this.
Thanks anyways - I’ll find out how to alter the DTD.
This is a big help.
Jim
I changed the DTD and now all my pages’ display’s are all garbled up!
This is weird.
Jm
Pls email me if you can help.
Remove the __ in 2 places from my email 1st.
Do you have toolkit alast?
Can you give me?
Você é o cara Kiko Santos
Do you know how to make the TabContainer under the ajaxtoolkit that make it become multilevel tabs?
thanks a lot, in our e-marketing tool we use a lot of AJAX, but we couldn’t get this one straight. Nice job!
greetings from the people at http://www.mymailmarket.be
hi.
i experience the same problem as mention above.
i did everything i was told
including adding the piece of code
.ajax__tab_default .ajax__tab_inner {height : 100%;}
.ajax__tab_default .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_tab {height:100%}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {height : 100%;}
to my aspx file
but it still doesnt solve the problem
pls help
try this:
.customtabstyle .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_tab {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_tab {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_tab {height:85%;}
This worked for me. Looks like the height of the cell which contains the tab is the only issue here.
You the man!
That solved my headache… thank you very much!
Great! I had no idea it was so easy to forcechange the styles of these auto-generated elements. Thanks for your help!
This is much simpler than you might thougth. Just add this css code above the control.
.ajax__tab_xp .ajax__tab_tab {
height: 21px;
}
Regards