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.

Tabbing into a textbox with MaskedEditExtender

I am having an issue with the MaskedEditExtender in the Sept 20th ajaxtoolkit release. I have this textbox group:

<asp:Label ID="lblEffort2_KP" runat="server" Text="Y2 "></asp:Label>

<asp:TextBox ID="txtYear2Effort_KP" runat="server" CssClass="textbox" Width="50px" Text='<%# bind("effort_2") %>' TabIndex="5013"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="MEYear2Effort_KP" runat="server" TargetControlID="txtYear2Effort_KP"
InputDirection="RightToLeft" MaskType="Number" Mask="999.99%">
</ajaxToolkit:MaskedEditExtender>

You'll notice I have the inputdirection = right to left. If you tab into this textbox it highlights the mask and when you start entering the number it goes from LeftToRight.

You can see this error also on the microsoft ajax toolkit sample page.

Go here: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx
and click on the text above the first textbox, the enter number one, and hit tab and you will see the issue. If you just click in the textbox it will work correctly, right to left. Any solution?

Hi Ryan,

I think it is a design pattern. When you press the tab and the cursor displays before the point. While you keep entering , the number will go to right from the left. If you have other suggestions, please post ithere. Also you can post your current idea to it. Our developers will evaluate them seriously and take them into consideration when designing future release of the product.Improving the quality of the products and services is a never-ending process for Microsoft.

Best regards,

Jonathan