QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

cfUniForm - Right-Aligned Labels and No Asterisk

Posted on February 17, 2010 at 9:16 PM in General, Uni-Form Tag Library

I sometimes get asked questions like "hey, man, how can I right-align labels with cfUniForm?" or "how can I change colors?", etc. The answer is: override the CSS! That's the entire purpose of Cascading Style Sheets. Here's a quick example of how to override a couple of default behaviors with the Uni-Form specification (which is what cfUniForm is a wrapper for).

Right-Aligned Labels

The Uni-Form spec default has <label> tags left-aligned. However, some people prefer their forms to have the text labels right-aligned, or "next to" their respective entry fields. Making this happen is incredibly simple. Just add the following to your application's stylesheet:

1. div.ctrlHolder > label,p.label { text-align: right; }
2. .uniForm .inlineLabels label em, .uniForm .inlineLabels .label em { position: relative !important; right: auto !important; display: inline !important; }

Ditch the Asterisk(*)

The Uni-Form spec includes an <em>*</em> in the label on required form fields. Want it gone? CSS to the rescue once again.

1. .uniForm .inlineLabels label em, .uniForm .inlineLabels .label em { display: none !important; }

Easy.

Summary

CSS is your friend. :-)

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

On 2/18/10 at 11:58 AM, Jeremy Prevost said:

Thanks! Every time I tried to do this myself I also was right-aligning the labels for check boxes which was not desirable. I always forget about child selectors...

[Add Comment]