Yii 1.1: Styling Radio Buttons

8 followers

The default behavior with radio button lists is ugly, and I figured out mostly how to style them a coupla different ways. I'll used the blog tutorial example (but with my own posting modes):

The current look:

Post Mode:
( )
Unapproved
(*)
Deleted
( )
Approved

This looks terrible: we can fix it either vertically or horizontally.

Vertical Styling

The first task is to style the buttons vertically, and a bit more compact. This is done by wrapping the radio button control with a DIV and a new compactRadioGroup class:

// in protected/views/post/_form.php
    <div class="row">
        <?php echo $form->labelEx($post, 'postmode'); ?>
 
            <div class="compactRadioGroup">
            <?php
                echo $form->radioButtonList($post, 'postmode',
                    array(  0 => 'Unapproved',
                            1 => 'Deleted',
                            2 => 'Approved' ) );
            ?>
            </div>
            <?php echo $form->error($post, 'postmode'); ?>
    </div>

This wraps the buttons themselves in a separate DIV which allows us to style them separately, then we add the styling:

/* webroot/css/main.css */
DIV#content DIV.compactRadioGroup {
    padding-left: 1em;
}
 
DIV#content .compactRadioGroup LABEL,
DIV#content .compactRadioGroup INPUT {
    display: inline;
}

The padding-left is optional, but I think it adds a nice touch when styling vertically. Now the buttons look like:

Post Mode:
 ( ) Unapproved
 (*) Deleted
 ( ) Approved

Which is much cleaner.

Horizontal Styling

Putting the radio buttons in a horizontal row is like the above, but with two minor changes:

First, we have to to change the default separator of "<BR/>\n" that Yii automatically puts between each input item, and that's done in the radioButtonList with the htmloptions array:

...
                echo $form->radioButtonList($post, 'postmode',
                    array(  0 => 'Unapproved',
                            1 => 'Deleted',
                            2 => 'Approved' ),
                    array( 'separator' => " | " ) ); // choose your own separator text

The pipe character (|) shows between each option - choose this to taste.

Next, in a horizontal radio group the padding isn't really necessary, so delete this part from the main.css file:

/* remove me for horizontal */
DIV#content DIV.compactRadioGroup {
    padding-left: 1em;
}

Now the buttons look like:

Post Mode:
 ( ) Unapproved | (*) Deleted | ( ) Approved

If you want the label and the buttons on the same line, remove the newly-added DIV and attach the compactRadioGroup class to the row's DIV instead:

<div class="row compactRadioGroup">
 ...
</div>

This can surely be generalized with separate styles for vertical and horizontal radio groups, but that should be easy to figure out given this.

This has only been tested with the default theme.

Total 4 comments

#13827 report it
dpattayath at 2013/06/29 04:14am
Awesome

Great article!! Thanks heaps

#13691 report it
Johnny Gan at 2013/06/17 03:40pm
Good solution

Create a new CSS class in this article is suggested to new Yii developer, which will not mess up other code.

If radio input button only used in form, then it's better to add above CSS script into /css/form.css.

#3111 report it
el chief at 2011/03/16 06:16pm
you can do it in pure css

http://learnyii.blogspot.com/2011/03/yii-radio-checkbox-inline.html

#2570 report it
Thirumalai at 2011/01/18 07:21am
Nice Coding

Your code is fine but i feel instead of using more then one css selector we could use with only one selector like following code for horizontal

.compactRadioGroup LABEL,
 .compactRadioGroup INPUT {
    display: inline !important;
    width: auto !important;    
}

Leave a comment

Please to leave your comment.

Write new article