Form layout: wrong design activeCheckBoxList and activeRadioButtonList

Hi all, I need to change the yii form layout couse I think radiobutton are rendered in a wrong way

Like you can see the deseign is wrong, how can I have radio buttons rendered all in the same line, or one in every line? Like you can see they take too much space!

And I think I will have the same problem with checkbox

Edit the CSS that corresponds to the radio buttons (and labels). Change them from display: block; to display: inline;

There’s no css about radiobutton in form.css and I like label’s style in normal input.

Someone can fix this?

use css to target your labels for checkboxes and radios and set their display to inline or inline-block.




div.yiiForm label { display: inline }



yiiForm is not used in Yii 1.1.x

:)

There’s the ‘template’ option in the $htmlOptions paramater that lets you specify the html for an individual label/value combination.

However, this brings me to a related question. Is it somehow possible to present radio/checkbox lists in a way that shows (for example) 3 options per line? Or do I need to create my own loop in combination with checkbox() instead of checkboxlist() for this?

@Sander: You can use css to control how many options to display each row (float: left; width: 30%;)

Ah yes, that could work, thanks!

Don’t work.

Because, the default separator is a new line "<br/>" . And with the last css code you will see like this:

If you modify the option “separator” to the checkboxList to " - " (for example). The last Css code of giang don’t work for you purpose and see like this:

I also want to get rid of the <br/>. Currently what I can think of is using activeCheckBox instead. Any ideas? does the template option solves this?

Had the same problem.

Simple solution is to use the option ‘labelOptions’ to either set a different class for label, or just to disable block display




<?php echo $form->radioButtonList($model, 'Model_id', 

CHtml::listData($ModelTypes,'id','Name'),

array('labelOptions'=>array('style'=>'display:inline'))); ?>



To get rid of ‘<br/>’ separator the option ‘separator’ worked for me just fine.




<?php echo $form->radioButtonList($model, 'Model_id', 

CHtml::listData($ModelTypes,'id','Name'),

array('separator'=>'','labelOptions'=>array('style'=>'display:inline'))); ?>



Going to cry watching my old project RemindMe on Facebook Apps TT

@bobris,thank you.

@bobris, your solution works great if you use the normal form type. When you change your form to "wide form" it does not display correctly (all the labels are displayed first followed by all the radio buttons)

So changing


<div class="form">

to


<div class="wide form">

will not work with this solution. <_<

I am also having trouble with the “wide-form” when trying to display inline radio button options. The labels end up completely separate from the buttons. Has anyone found a solution for this? I’ll post one if I’m able to figure it out.

Okay, I found a solution to this one. When using the wide form, add the following to your form.css file:




DIV#content .inlineRadioButton LABEL

{

        float: none;

	display:inline;


}




DIV#content .inlineRadioButton input

{

  display: inline;

}





	<div class="row">

        <?php echo $form->labelEx($model,'attribute'); ?>


          <div id="inlineRadioButton" class="inlineRadioButton" >

        <?php


          echo $form->radioButtonList($model,'attribute',

                $this->getRadioButtonOptions(), array('separator'=> ' ')

                );


         ?>

         </div>

         <?php echo $form->error($model,'attribute'); ?>

	</div>

Alternatively you could simply add "float:none;" to the style portion of the labelOptions as mentioned earlier in the post.

here’s how to do it without modifying your php or html:

Excellent solution, good alternative to having to specify a labelOptions field in every checkboxlist type of form field. You pretty much always want checkboxes and radio buttons to have their label next to them, not on another separate line.

Thanks.

[email=“adxd@ff.mm”]B)[list=1]

  • [sup][sup][sup][sub]dsfdfdfdf[/sub][/sup][/sup][/sup]

[/list][/email]