One of the (very few) downsides I see working in Customer Support is that most of the times when talking to colleagues and friends or writing a new post for my blog, I find myself talking about problems, bugs, exceptions… what is not working fine, like a doctor most of the times has to deal with malaises and diseases. Anyway the good part is that most of the times we are able to find the solution to those problems, or at least we can alleviate them.
This is the case of a problem I had with the Ajax TabContainer control which is not displayed correctly in Design View, where the Tab caption is not completely visible, as in the screenshot here below:
But if we open the page in a real browser, it displays correctly:
This is part of a problem reported on the Connect site some time ago: http://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=322477.
This has to do with the !DOCTYPE (Document Type Definition, or DTD), which among other things influences how CSS styles, formatting and positioning are applied to the page and its UI elements. With DTD we can control IE’s strict standard compliance; for example in this case if we remove the DTD from the source code in Visual Studio, then the TabContainer control and its Tabs are displayed correctly:
But this just moves the problem to the real browser, where without strict compliance mode IE fails to render the tabs correctly:
Visual Studio uses it own rendering engine to show pages and controls in Design View, and this is the component which does not handles compatibility mode correctly; this is a known issue and as of now I know this problem is scheduled to be fixed in Visual Studio 2010, there is no plan for a fix for the current Visual Studio version.
Anyway this real problem here is the difficulty to click on the Tab caption to switch between tabs at design time; other than that I’ve not heard or other issues but feel free to correct me if I’m wrong. So, if that is the real issue, a simple workaround a suggested to the customer is to select the TabContainer control and then in the “Properties” grid you can change the ActiveTabIndex value and press ENTER: this will give focus to the Tab you selected. Remember that this is a zero based array, so as in the sample here below if you want to switch to TabPanel5 you have to set ActiveTabIndex to 4:
Hope this helps…
Carlo
PingBack from http://www.codedstyle.com/tabcontainer-rendered-incorrectly-in-design-view/
One simple thing that can be done, is to have the DTD place inside a server tag.
ex. <%= "<!DOCTYPE html PUBLIC \"-//W3C....." %>
Like that, it won't render in design mode in VS2008, but it will render at runtime on the browser.
Thanks for the Tip on the cause of the problem... this was driving me mad.
Thanks for the fix.
I have another issue related with Ajax TabContainer:
When I select any control placed inside the tabcontainer, it doesn't select the corresponding source code in source view. It selects the code of the whole TabContainer.
I have 5 TabPanels and many controls in each panel and is difficult to locate the code for each.
Also I noticed that recently when I do any change in Design View or Properties window, it doesn't change in Source View and the change will be lost. This happens maybe only for the end of the document, for the last TabPanels. Sometimes changing from first few TabPanels still works.
Is there any limit how long an aspx file should be?
Thanks,
Steven
After placing the DTD inside a server tag,
<%= "<!DOCTYPE html PUBLIC \"-//W3C....." %>
I had weird compilation errors in some temporary file, not even in my code. The error is in this line:
@__w.Write("\r\n\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\r\n");
The error says ")" missing at the beginning and end of line.
The file name is "App_Web_dr0e1per.0.cs", but at every try is different, only the App_Web_ is the same.
Finally I figured out that if I leave the DTD in default format and leave my comments too before the DTD, which looks like:
<%-- Quick fix for tabcontainer ... -->
, the Visual Studio shows correctly the TabPanels. I can't understand why but it fixed for me. Sounds very odd that leaving some comments before the DTD can fix the design view.
the comment just before the DTD fixed it for me as well. This is very weird.
Thanks a billion - Great article - Great explanation ... I just "upgraded" to VS2008 from 2005. The Design View is full of rendering oddities like this one. I really wish I had my VS2005 interface back. VS2008 Design View is a DOWNGRADE of the well functioning VS2005 version!
Thanks about your tips, this really help me, with the ActiveIndex I can move to any tabpanel, thanks again!