Monday, March 26, 2012

Tab custom style lost on postback

I just downloaded the new Ajax toolkit Release 10920 and found that my custom style for the Tab control is lost on postback. When the page is first loaded, my tabs look correct, but after postback my tab css style is not fully rendered. It seemed to revert back to the default style. This has been working with all previous toolkit releases.

Below is my custom style which I've copied to my own custom .css file and made a few minor changes :

/*Tab Style*/
/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap;text-align:left;padding-left:20px;padding-top:10px;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(../images/tab-line.gif) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(../images/tab-right.gif) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(../images/tab-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:0px;padding-top:4px;padding-bottom:4px;margin:0;background:url(../images/tab-little.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(../images/tab-hover-right.gif) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(../images/tab-hover-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(../images/tab-hover.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(../images/tab-active-right.gif) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(../images/tab-active-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(../images/tab-active.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:0;padding:0px;background-color:#ffffff;}

Has anyone encountered this problem with the new release?

Thanks,
Jensayato

Hi,

Can you ellabrote more..

So it will be more helpful to solve your problem.

No comments:

Post a Comment