Tab Container Custom Style in Firefox...

Hi,

I am using a TabContainer with a custom CSS file. I have copied the original CSS file and have modified it a little. Here is the CSS I am using:

/* xp theme */

/* Our Additions */

.StpAjaxTab

{

margin-left:auto;margin-right:auto;

}

.StpAjaxTab.ajax__tab_header

{

font-family:verdana,tahoma,helvetica;font-size:11px;

/* Our Additions */

border-bottom:solid1px#000000;text-align:left;

}

.StpAjaxTab.ajax__tab_outer

{

padding-right:4px;height:21px;

}

.StpAjaxTab.ajax__tab_inner

{

padding-left:3px;

/* Our Additions */

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_tab

{

height:13px;

padding:4px;

margin:0;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_inner

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_active.ajax__tab_inner

{

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_body

{

font-family:verdana,tahoma,helvetica;

font-size:10pt;

border:1pxsolid#999999;

border-top:0;

padding:8px;

background-color:#ffffff;

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;border-top:none0px;

}

I am using the TabContainer with the CssClass like this

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<ajax:TabContainerID="TabContainer"runat="server"Width="750px"Height="200px"meta:resourcekey="TabContainer"CssClass="StpAjaxTab">

<ajax:TabPanelID="AlleTrefferTabPanel"runat="server">

<HeaderTemplate>

<asp:UpdateProgressID="UpdateProgress"runat="server">

<ProgressTemplate>

<asp:ImageID="ProgressImage"runat="server"ImageUrl="~/Images/progressIcon.gif"Width="16"Height="16"/>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:LabelID="AlleTrefferLabel"runat="server"Visible="false"Text="Alle Treffer"meta:resourcekey="AlleTrefferLabel"></asp:Label>

</HeaderTemplate>

<ContentTemplate>

Content, you may place a button to generate a partial postback...

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

 
</ContentTemplate>
</asp:UpdatePanel>

If you try this out, you will see, that it will see that it works perfectly on IE. But on firefox, when a partial postback is generated, the tab headers' positions are not as they have to be.

After a partial postback has been generated, the tabs are not moving back to their original position. So the question is simple. How can I get the TabContainer in firefox behave exact like in IE?

I tried to change the css styles, but it doesn't worked.

Thanks for help,

bye...

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien

Tab Container Javascript Error: Unspecified Error

I keep getting this error when I try to view a certain page with IE7. I do not get the error with Firefox 2. I have two pages that have tabs, but only receive an error on one of them. It occasionally works with no problems. If I set the first panel's visible property to false, then it works fine. The first panel contains an 2 update panels with a filtered text boxes, an update panel with a calendar extender, and an update panel with a mask edit extender and mask edit valuator. I also use framesets. Could any of this be causing the error? Does anyone know a work around?

I have found that the Masked Edit Extender is causing the error. Can I use this inside a tab panel? Is there something special I need to do to use it? If it's not possible, does anyone know of anything similar that would work in its place?

Tab panel is not working properly in Firefox 1.5.0.10

Tab panel is not working properly in Firefox 1.5.0.10. When ever i click on the tab , the tab panel is getting disappeared.

If I refresh the page, then the tab panel is displayed with default tab container being selected.

It works properly in 1.5.0.12.

Does any one has faced this problem ?

Hi,

According to your description, it seems this may be a issue the that version of Firefox. Although I'm not 100% sure.

If that's the case, it's hard to expect everything runs fine with it. And it would be recommended to update if an older version has a issue.

TabContainer and Firefox 2.0.0.2 Postback Issue

After updating Firefox to 2.0.0.2 yesterday, all my TabContainers have stopped functioning. Whenever a postback occurs, the entire TabContainer disappears and I get a javascript errorError: Sys.InvalidOperationException: Component 'ctl00_ContentPlaceHolder1_TabSet1' was not found.

Tested in IE 7 and they continue to work, and they were working fine until updating to the new version of Firefox.

It appears to do it only when the tabcontainer is inside an updatepanel, not when the updatepanel is inside the tabcontainer

This has become a problem for me - I had to remove all update panels that I had associated with my TabContainer control. Here is a little more info on the problem:

Repro:
In FireFox 2.0.0.2 only...
See below for .aspx file to test against. In short, put a TabContainer inside of an update panel, cause a post back to occur.

Expected:
Postback should occur normally, tab container is updated inline.

Actual:
Javascript exception is thrown, Error.invalidOperation() , in file (I believe) MicrosoftAjax.js, function function Sys$Component$_setReferences(component, references) .

Notes:
* http://www.mozilla.com/en-US/firefox/2.0.0.2/releasenotes/
* Stepping through the code actually seems fine - but I've not done much debugging in this particular portion of Ajax.

<%-- Sample, broken TabContainer inside of Update Panel --%>

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><html><body><form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="Server" /> <asp:UpdatePanel runat="server" ID="updatePanelForTestControl" UpdateMode="Conditional"> <ContentTemplate> <ajaxToolkit:TabContainer runat="server" ID="Tabs" ActiveTabIndex="1"> <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab 01"> <ContentTemplate> First tab panel </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab 02" > <ContentTemplate> Second tab panel <asp:Button ID="Button1" runat="Server" Text="Post Back" /> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </ContentTemplate> </asp:UpdatePanel></form></body></html>

I'm not sure who owns the responsibility here - if it's an update panel issue, or a TabContainer issue. As such, I posted an "issue" on the AjaxControlToolkit forums:

http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8532

Regards,
Kevin

Investigation is ongoing. What appears to be the case is that the Firefox 2.0.0.2 update changed the ordering of two browser events UpdatePanel uses in such a way as to break certain aspects of ASP.NET AJAX. Microsoft folks are looking into the issue now and should update this thread (or maybe post a new, sticky one) once they know more.

that is casewe are working with the firefox team actively to figure out the best approach to address this issue and we will update this thread as soon as we know more about it.

Just to expand on this, my customers have told me of problems with Telerik RadAJAX and MagicAJAX when FireFox 2.0.0.2 was installed.

Telerik has already published a fix:http://www.telerik.com/community/forums/thread/b311D-tccek.aspx

I have yet to validate the MagicAJAX problem.

From my perspective as a custom controls developer, it sounds like FireFox did a bad thing because they've broken a lot of AJAX-based sites.

FYI, the ASP.NET AJAX team will be tracking this issue here:http://forums.asp.net/thread/1600941.aspx

Please check there for up-to-date information.

It seems that in FireFox 2.0.0.2 dynamically loaded javascript files (much needed by all AJAX frameworks) are handled in a completely different fashion, whici as far as I can see is causing major problems fror all AJAX frameworks. The guys from telerik are ready with the update and created a hotfix (Q4 SP2) - so if you are using telerik r.a.d.ajax - just upgrade. I'm sure Microsoft guys will respond as quickly as possible as well (and I am well aware that for company like Microsoft and for product like ASP.NET AJAX this will take some time).

Here is the bug I believe is related (since I've seen most AJAX libraries use the innerHTML approach for dynamically loading javascript under the hood).

https://bugzilla.mozilla.org/show_bug.cgi?id=371628

TabContainer Firefox problem

I am using tabContainer for tabed navigation with update panels inside tabpanel for async updates to the server.

Ome tab panel contains FCKEditor. I have experinced 2 errors on the page when using Firefox:

1. The page is loading very slowly and the following message is displayed in the status bar:
"Transfering data from localhost"

2. FCKEditor when used inside tab panel and updatepanel will losse the text entered when I try to update asinc to the server.

I have tried the following solution but it did not work:
http://jlcoady.net/archive/2007/03/30/fckeditor-work-inside-updatepanel

The most relevant error in Error console seems to be the following:
Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File:http://localhost:56780/WebResource.axd?d=MJBzFYTfWN4CIFiUGFH5fLnKi97ZUvWrbLbcxzkrjzR4fE38RehHyps3lRxPqwg76Z_83olVsuwUqCCjsO2ZJw2&t=633130226175471389
Line: 5

With the following data:

/* default layout */.ajax__tab_default .ajax__tab_header {white-space:nowrap;}.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}

There is also a bunch of css errors.

Needless to say everything works perfectly in IE 7.

Any help/suggestions will be greatly appreciated.

P.S. To isolate the problem - I have taken fckeditor out of the page and everything works fine. Then I added FCK Editor outside of update panel and tabcontainer and the problem reappeared, hence it is safe to conclude that the problem is related to FCKEditor.

Solved the problem.

FCKEditor subfolder containing all the setting,images etc for FCK Editor MUST be placed in the root folder of a web application. Probably there is a way to do it but it is not an issue any more.