CODEWITHSUNDEEP
csscakephpcheckbox
user3213557
user3213557

Reputation: 13

Cakephp horizontal checkboxes

I'm trying to get a list of checkboxes to display across the page instead of vertically I've read numerous posts in SO and others, and it appears I'm doing the correct thing, but my checkboxes refuse to float horizontally. I've tried a number of solutions including inline styling and assigning a different class in the code. Can someone spot my error please?

Cake Code

<?php
    echo $this->Form->input('Check.Assessment', array(   'multiple' => 'checkbox')); // checkboxes
?>

Generated HTML

<div class='assessments'>
<div class="input select"><label for="CheckAssessment">Assessment</label><input type="hidden" name="data[Check][Assessment]" value="" id="CheckAssessment"/>

<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="1" id="CheckAssessment1" /><label for="CheckAssessment1">Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="2" id="CheckAssessment2" /><label for="CheckAssessment2">Blah Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="3" id="CheckAssessment3" /><label for="CheckAssessment3">Blah Blah Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="4" id="CheckAssessment4" /><label for="CheckAssessment4">Blah Blah Blah Blah</label></div>
</div>

CSS

.checkbox
{
float: left;
padding-right: 15px;
}

Upvotes: 0

Views: 858

Answers (1)

Kamikaza
Kamikaza

Reputation: 635

I fixed a nice demo fiddle for you https://jsfiddle.net/wgrLfxg3/15/

Just fixed the css display:box like this

.checkbox
{

padding-right: 15px;
    display:box;
}

If you want margin between divs just add 

padding-bottom:10px

or something like this.

If you want them to float left just set 

left:0;

EDIT:

If what you need is to have them inline just add the display:inline-block, here is the demo for this

https://jsfiddle.net/wgrLfxg3/19/

Upvotes: 0

Related Questions