Webform is kind of a bear to format in CSS.

(1) It would be nice to have a webform-component.css sheet listing all the available classes and ids. They can all be empty, but then you know what you can overwrite.

(2) Webform does not have completely consistent naming for classes and ids. At the top we have ".webform-client-form", and for most (but not all!) components we have ".webform-component". Also, for most, but not all, we have wrapper divs.

BUT, the grid and the submit button don't have component-level classes and must be addressed from the top of the hierarchy: ".webform-client-form .form-submit" and ".webform-client-form .sticky-table". There should be a component class called ".webform-component-grid", and probably one for ".webform-component-submit".

(3) It would be nice to have classes to address both the left and right sides of a layout. While "label" does address the left side, it also addresses other divs on the page called label. Specifically, if you set a width on "label", you have to over-right that width in select box "label.option". So, there should probably be a class to address all the component labels, something like ".left-side" or ".component-names".

To format the right side, you have to address several different classes: ".form-text", ".sticky-table", ".form-radios", etc. Again, there should be a class for the whole right side, like ".right-side" or ".component-types".

I know everyone has their own favorite way to use css, and special circumstances. I was able to get a pretty layout, but it took a lot of detailed effort, and a few things never quite worked the way I wanted.

Comments

quicksketch’s picture

Status: Active » Closed (fixed)