0

I have list of restaurant cuisines (HABTM) - when the user adds a restaurant, they choose from all the checkboxes of cuisines.

The checkbox inputs are set to float:left; with padding/margins... etc and all looks good - a nice grid of checkboxes.

Question/Problem: The checkboxes show up alphabetically, but not in the way a user would expect - they're left to right in repeating rows (like you'd expect by making them all float).

How can I get them to be alphabetical, but in vertical columns? So alphabetically, you'd read Top to Bottom, then go to the next column.

I could do this just find w/ just normal PHP, but in CakePHP, my call to show the checkboxes is just:

<?php echo $this->Form->input('RestaurantCuisine', array('multiple'=>'checkbox')); ?>

ADDITION:

JS FIDDLE HERE (html is mostly un-editable since it's being generated by CakePHP - can edit the CakePHP echo though if needed - but that can't be in the fiddle)

Dave
  • 28,833
  • 23
  • 113
  • 183
  • Assuming there isn't a CakePHP way to handle it (and why would there be), it's a CSS problem. If that's the case, it would help you very much in getting an answer if you made a [jsFiddle test case](http://jsfiddle.net/) of the relevant HTML/CSS. – thirtydot May 24 '11 at 18:02
  • @thirtydot - Will do - incoming in a sec. (though the HTML is unable to be changed.) – Dave May 24 '11 at 18:12
  • @Dave: Can't believe I didn't remember this before, but I've already come across a problem very much like this, see: http://stackoverflow.com/questions/5484215/how-to-make-floating-div-list-appear-in-columns-not-rows/5484555#5484555 (*where I get into a pedantic argument..*). Nothing has changed since that question was posted. You can either forget about older browsers and use CSS3 columns, use JavaScript to do it, or use PHP to do it. Though in your case, you could only use PHP if there's a fixed width on `#cuisines`. What do you think? Is `#cuisines` fixed width? – thirtydot May 24 '11 at 18:32
  • @thirtydot - I do care about older browsers, and I'm not sure how to use PHP to do it given the question details above (ie CakePHP). The JQuery columnize() seems cool, but I cannot get it to work. – Dave May 24 '11 at 19:40
  • @Dave: If you're happy to use jQuery for it, that's the best way I think. I'll write some jQuery to reorder the `div`s correctly if you like. Is `#cuisines` fixed width? (or do I have to handle the browser window being resized and changing the width of `#cuisines`?) – thirtydot May 24 '11 at 19:43
  • @thirtydot - I'm already including jQuery, so I'm certainly happy w/ that. I tried using columnize() and it said it's not a function :( The width of the div is variable unfortunately - I can make it fixed if it MUST be that way, but would rather not. Thank you in advance for any direction / help! – Dave May 24 '11 at 19:47

1 Answers1

1

Based on the comments, I've created a hopefully acceptable jQuery solution.

See: http://jsfiddle.net/svRmL/

var $element = $('#cuisines');
var $elementWidth = $element.find(' > .checkbox').outerWidth(true),
    elementCount = $element.find(' > .checkbox').length,
    $boxes = $element.find(' > .checkbox');

/* just for debug */
$boxes.each(function(i) {
    $(this).find('label').html(i);
});

//set resize function
$(window).resize(function() {
    var perRow = Math.floor($element.width() / $elementWidth),
        i, j, $thisColumn, inc;

    $boxes.appendTo($element); //move elements out of columns from previous resize
    $('.tempColumn').remove(); //destroy old columns
    for (i = 0; i < perRow; i++) {
        $thisColumn = $('<div class="tempColumn" />').appendTo($element).css({
            width: $elementWidth,
            float: 'left'
        });
        inc = Math.ceil(elementCount / perRow);
        for (j = inc * i; j < inc * (i + 1); j++) {
            $boxes.eq(j).appendTo($thisColumn);
        }
    }
}).resize(); //trigger resize function immediately
thirtydot
  • 224,678
  • 48
  • 389
  • 349