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
Quote of the day:
Tact is the knack of making a point without making an enemy. – Isaac Newton