Magento 1.9 - Custom Options on Product Page - Multiple Columns

Question

My apologies if this question is posed elsewhere.

I am utilizing custom options on my product pages and I have about a dozen drop downs per product. By default, all options list in one column the full width of the block that they are in. In order to prevent the user from having to scroll down to answer each option, I would like to display them in two or three columns across within the same block.

I am new to Magento and PHP so any help and example would be greatly appreciated!

Answer 1

As these elements are generated dynamically I would suggest you to use simple CSS and JS to do it. Here is simple bootstrap and jquery solution.

var $boxes = jQuery('dl.last').children();
var boxesLen = $boxes.length;
for (var i = 0;i < boxesLen;i+=2){
    $boxes.filter(':eq('+i+'),:eq('+(i+1)+')').wrapAll('<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"/>');
};