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. 

7 comments:

  1. 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. There is a new css3 property to do this . Check out the spec. Otherwise I believe there is also a jquery plugin

    ReplyDelete
  3. Is possible to use custom images instead of radio buttons?

    ReplyDelete
  4. 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. good job.........

    ReplyDelete