[karte]

I've a code for checkbox list.

echo CHtml::activeCheckBoxList(PropertyFeaturesAmenities::model(), "amenities", CHtml::listData(Amenities::model()->findAll(), 'id', 'amenities'),array('class'=>'checkboxList'));

and it displays like this
 checkboxlist.png (53.62K)
Number of downloads: 66

and want to list it in three column like this..
 checkboxlist2.png (69.64K)
Number of downloads: 61
how to do this.

[chandran]

karte, on 18 October 2013 - 07:12 AM, said:

I've a code for checkbox list.

echo CHtml::activeCheckBoxList(PropertyFeaturesAmenities::model(), "amenities", CHtml::listData(Amenities::model()->findAll(), 'id', 'amenities'),array('class'=>'checkboxList'));

and it displays like this
checkboxlist.png

and want to list it in three column like this..
checkboxlist2.png
how to do this.

Hi,

You can use clistview to display only checkbox and provide pagination for every 10 checkboxes.
Thats all..
This is one way of handling multiple checkbox options

[chandran]

Hi,

May be this will be helpful for you
http://stackoverflow...ee-parallel-div

[kayo]

try this

<div class="checkboxgroup">
  <?php echo $form->checkBoxList($model, 'attribute', CHtml::listData(), array('template'=>'<div><label class="checkbox">{input}{label}</label></div>')); ?>
</div>

css

.checkboxgroup {
	overflow:auto;
}

.checkboxgroup div {
	width: 130px;
	float:left;
}

[karte]

kayo, on 18 October 2013 - 03:21 PM, said:

try this

<div class="checkboxgroup">
  <?php echo $form->checkBoxList($model, 'attribute', CHtml::listData(), array('template'=>'<div><label class="checkbox">{input}{label}</label></div>')); ?>
</div>

css

.checkboxgroup {
	overflow:auto;
}

.checkboxgroup div {
	width: 130px;
	float:left;
}

Thanks man.. I got it by doing some changes in your code.

<div class="checkboxgroup">
<?

echo CHtml::activeCheckBoxList($model, "attribute", CHtml::listData(),array('separator'=>' ','template'=>'<div>{input}{label}</div>'));
?>
</div>

CSS

.checkboxgroup {
    overflow:auto;
}

.checkboxgroup div {
	width: 230px;
	float:left;
}