Pages

▼

Wednesday, March 16, 2011

How to override Yii's block radio button list labels and make them inline

By default, Yii radio buttons, radiobuttonlists, and checkboxlists look dumb. The label is on a different line, which is not a great design.

Here's how to fix it:

In your form style sheet (form.css), set:

input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }

that's it, you're done.

What it does is says anytime you have a radio button with a label element directly after it, make that label inline instead of block, meaning that there won't be a line break.

I would also recommend changing Yii's default checkbox label positioning to before the label. 
at

7 comments:

  1. AnonymousMarch 19, 2011 at 9:17 AM

    Is it possible to make the checkboxes listed in multiple columns? For example, 3 columns per row, so if I have a very long checkbox list, it won't result in a very long page.

    ReplyDelete
  2. Neil McGuiganMarch 19, 2011 at 11:07 AM

    There is a new css3 property to do this . Check out the spec. Otherwise I believe there is also a jquery plugin

    ReplyDelete
  3. AnonymousMay 9, 2011 at 3:25 AM

    Is possible to use custom images instead of radio buttons?

    ReplyDelete
  4. AnonymousOctober 16, 2011 at 8:51 AM

    uhm?!? why overwriting the default form.css?

    radioButtonList( $model, 'attribute', dataArray, array(
    'separator' => '', // overwriting the line break
    'template' => '{input} {label}', // put the label behind
    'class' => 'classname', // additional css class
    ));

    in css you can set all styles needed (float, width, padding) for multiple columns. you may also be able to set icons as background images

    ReplyDelete
  5. AnonymousDecember 18, 2012 at 8:46 PM

    good job.........

    ReplyDelete
  6. NéstorJanuary 16, 2013 at 12:52 PM

    that didn't work for me

    ReplyDelete
  7. UnknownMay 22, 2013 at 1:00 PM

    That works, thanks!

    ReplyDelete