Having issues displaying Ajax Control Toolkit Tab control in DotNetNuke?
(3 votes, average: 5 out of 5)
Loading ...When making my implementation of ASP.NET AJAX for DotNetNuke and later Ajax Control Toolkit, naturally first control I’ve tried was the tab control from the Ajax Control Tookit (naturally to me because I’ve waited for some time to use it).
But when the control had rendered on the screen it had problems and looked like this:
After digging into the problem, I’ve found that it was related to one of the tab control’s css styles having a wrong height. To remedy it (the problem was seen only when implementing it in DotNetNuke, in normal ASP.NET for some reason it works ok), I’ve overriden the style in my .ascx control like this:
<style type=”text/css”>
.ajax__tab_xp .ajax__tab_tab {
height: 21px;
}
style>
Setting the height of one of the generted SPAN tags to it’s full height instead of the default 13 px (in the first picture).
So, after adding this, the control rendered like it should:
Hope this helps someone!
Cheers!
Seriously… BIG thanks.
I fought this for a better part of a day and this fixed the problem in less than a minute.
April 12th, 2007 at 6:56 pmcool, that fix the problem for IE but Opera still not work. Sample Tabs control working fine in normal asp.net but does not display in opera. It’s like the DNN style rewrite some of the ajax style.
May 22nd, 2007 at 9:49 pmI have the same behaviour in an ASP.NET Application, not DDN. Now that I know what to look at I can fix this. Has anyone experienced a problem with collapsible panels? When I collapse my panel in production it automatically expands but not in development.
June 1st, 2007 at 5:05 pmThis solved my problem! Spent a couple hours on it. You are a life saver in my book!
August 16th, 2007 at 10:23 pmI had to change the DOCTYPE to:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
for IE other doctype’s may be needed for other browsers.
August 23rd, 2007 at 8:24 pmThis saved the day, for me…
September 3rd, 2007 at 11:13 pmHI i encountered the same prob,and did everything i was told to do.but still can solve the prob.
September 25th, 2007 at 7:34 ampls help
dave
tan_jiawei@hotmail.com
i have a problem with tab panel if i am displaying the heading in 2 lines in a tab ,i am getting a gap between tab heading and div .how to reduce the gap..
October 9th, 2007 at 11:36 amI have the tab control in an Update Panel. On first load the fix above works. When I do something cuase a postback throught the Update Panel the rpblem returns.
This the start of the code: -