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...
CodeBassRadio

Latest Articles

Eventually something really brilliant and witty will appear right here.

Calendar

October 2017
S M T W T F S
« Sep  
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Subscribe

Enter a valid email address.

The Obligatory Wish List