Mantas Vaitkūnas
Mantas Vaitkūnas

Reputation: 744

Modify CHtml::activecheckBoxList to print checkboxes in columns

i have checkbox list printed in one column, but i need it to print in columns and in every column should be for example 10 checkboxes. My php code:

//$user_cats- array of categories. 
    echo CHtml::activecheckBoxList($categories,
           'selected['.$parent->id.']',
        CHtml::listData(
                $user_cats,
                'id',
                'title',
                ''
        ));

Maybe is there a way to modify CHtml::listData that it could print checkboxes in columns?

Upvotes: 0

Views: 1784

Answers (2)

ernie
ernie

Reputation: 6356

I would do something like this:

CHtml::activecheckBoxList($categories,
       'selected['.$parent->id.']',
    CHtml::listData(
            $user_cats,
            'id',
            'title',                
    ), array('separator'=>'',
             'template'=>'<span class="checkbox-columns">{input} {label}</span>'),
    );

And then in my CSS something like:

span.checkbox-columns {
    float:left;
    width: 20%;
}

Adjust the CSS, primarily the width percentage, as needed.

Upvotes: 2

Orlymee
Orlymee

Reputation: 2357

First thing CHtml::listData generates a dataset that is suitable for use in activeCheckboxList, dropdownlist etc.

Now if you want to change how the check boxes appear on your page you need to pass the htmlOptions array to the activeCheckBoxList. You can read more about it on Yii activeCheckBoxList

for example:

CHtml::activecheckBoxList($categories,
       'selected['.$parent->id.']',
    CHtml::listData(
            $user_cats,
            'id',
            'title',                
    ), array('separator'=>'--')
    );

So by default if you don't specify a separator it uses a line break but if your provide it it will use that separator instead. Also if you want to add some more style or format the checkboxes a bit better you can do that as well. Just read the documentation, the link is included above. It is all possible through specifying additional options for the htmlOptions array.

Upvotes: 1

Related Questions