Table Police Busts Wizard Control

The other day I was going through documentation and samples to the newly born Wizard server control. Overall, it packs some very impressive functionality and a plethora of customization options. The downside is it wraps everything into tables, with each “step” it its own tr.

Simply drop a wizard on a web page, run it and see for yourselves: it’s a mishmash of inline CSS (<td style="height:100%;">, etc) and attributes (td align="right", cellspacing, cellpadding, etc). Extra points for reading the CreateControlHierarchy method with Reflector.

I remember reading that 2.0 server controls would be templated for the most part so you’d be able to write your own markup. That’s great, but what’s the purpose of stuffing it in tables? If you think laying out floats is cumbersome, try giving tables consistent look in IE, Mozilla, Opera and Safari. Talk about pain!

IE 5.0, 5.5 and 6.0 all have their own corks when it comes to tables. Mozilla doesn’t play nice with CSS applied to <colgroup> and <col>. Opera’s rendering engine is rigged with weird logic of applying borders to rows and columns, and so on and so forth. This list is endless. Why would you want to deal with it?

To paraphrase an old adage, busts will continue until markup improves.

I might've missed it in previous posts but you might as well go ahead and bust the menu control for sure and probably the sitemappath and treeview controls. I know the menu uses tables and injects some invalid css into your pages but it's the only one I've looked at thoroughly.

Just use #wizardcontainer tr { height:auto !important;} than tr height will be default.

I wrapped mine in div, removed the wizard height value, then set this style:

#YourWizardContainer div { height:auto !important;}

This went from the standard static box to a dynamic box. Helps save space, and will adjust for more or less data (hide/show panels).

When i used tr as shown above or anything else, it would mess up and cut off portions of my elements.

Hope it helps.

Zam