Why it was so difficult to get started styling the ASP.NET AJAX tab control, pt. 1

 

OK, having blogged earlier about how you can style the ASP.NET AJAX tab control, I am going to tackle the issue of why it was so difficult to get started. Hopefully, Microsoft will take heed of the numerous complaints and do something…

Be warned: this is a bit of a long ride…

Getting started

First of all, your typical developer will plunk the control down on a webform, set a few properties, and run it in the browser. "Wow, looks cool." Then, "Hmm, wonder if I can change the font/background color/padding/margin etc.?"

At this point, the problems begin. The next step most users will take is to add a class to their .CSS file and add a <div> or <span> that references that class. This will fail. Interestingly, adding some in-line .CSS to a div or span surrounding the text on one of the tabs would actually succeed; but this is awkward at best, and limits what you can style. Most developers will probably want to change two things at this point: the font size and font-family on the tab "bodies" and on the tab themselves – that is, the row of tab images across the top of the control which you click to change tabs. They will quickly grind to a halt.

The Docs

So, the next step most will take is to have a look at the docs. I won’t mention how difficult and non-intuitive it is to find the online docs for the toolkit from the main AJAX page – oops, I guess I just did. Now that I’ve started- why are there so many links to "Documentation" off the toolkit pages that take you to the docs for the framework, not the toolkit? Grrr. The link that actually takes you to the meager docs available is labeled "View the Toolkit live". Not the first place I’d go looking for docs! There are a total of 5 or 6 paragraphs dedicated to the Tab control, of which most are self-evident listings of properties you can easily see in Visual Studio.

This is most of what the docs have to say about styling the tabs:

You can find the default styles in the Toolkit solution in the "AjaxControlToolkitTabsTabs.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is used.

This is not only misleading, it is actually incorrect! The "default style" is NOT the style used in the example they mention! The example looks like this:
tabs-ex

This is clearly the "XP style"! The "default" style is actually a bare-bones style that has no images at all for the tabs!

Next attempt – misled by documentation

I was now armed with the above "knowledge", and the information that I dug up elsewhere which detailed how you use the "CssClass" attribute on the TabContainer tag, referencing the name of the class of the style you created. Just the kind of minor detail that stops you cold if you don’t know it… Thus armed, I figured I could simply place one style rule in my CSS class, say, to change the tab header font-family, to "system",  and, as stated in the docs, "If you[…] do[…] not provide values[…] it falls back to the default value". Which I read as, "anything you don’t specify will look like the XP style." WRONG-O! The docs are incorrect: the default style is NOT the XP style seen above. This is what you would see if you changed only one style, say, the font-family of the tab headers:

tabs-default

Not really what you think of as a tab control, is it? And yet, we did what the docs told us to! They led us to believe we would see the XP style here!

So, the reaction to this on the part of most developers would be: "Oops! I broke something! Must be my fault!" And, I confess, that was my reaction. I spent several hours trying to understand why I followed simple directions and my result was just wrong. The docs need fixing NOW.

Next: Part 2

I am going to cut this off now and get some dinner…more in the next installment. Edit Jan. 19, 2010: Obviously Part Two never happened. Sorry.


Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: