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:
~~~
[css]
/ 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:
~~~
[css]
/ 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.
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
you can do it in pure css
http://learnyii.blogspot.com/2011/03/yii-radio-checkbox-inline.html
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.
Awesome
Great article!! Thanks heaps
more compact and universal
Or you can use like me more compact and universal approach (no need to use additional DIV's to align them horizontally)
input[type="radio"], input[type="radio"]+label { display: inline; } input[type="radio"] { margin-left: 10px; }<?= $form->field($model, 'CUSTOMER_TYPE')->radioList(
ArrayHelper::map(Customertype::find()->orderBy(['ID' => SORT_ASC])->all(), 'ID', 'NAME'), [ 'columns' => [ // ... [ 'class' => 'yii\grid\RadioButtonColumn', 'radioOptions' => function ($model) { return [ 'value' => $model->CUTOMER_TYPE, 'checked' => $model['value'] == 2, 'name'=>$model->CUSTOMER_TYPE, ]; } ], ], 'separator' => '    |   ', ] )->label('', ['id' => 'rbtnlabel']); ?>If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.