function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
fundooMentalfundooMental 

How to display Checkboxes in columns

I am diplaying the value of multiselct picklist as checkboxes and it shows up correctly. The only thing which I am not able to achieve is, I want to display the checkboxes in three columns, like if I have 12 values for multiselect picklist then the checkboxes should show up in 4 coulmns and 3 rows. And in future if I add more values to the multi-select picklist the next checkbox should automatically be shown in the next column.

At present the checkboxes they all show up in 12 rows (for 12 values) and in one column.

The Visualforce code for getting the multi-select picklist value as checkbox is below:

<apex:selectCheckboxes value="{!slctCheckboxes}" id="selctCB" layout="pageDirection" >
<apex:selectOptions value="{!MultiPickNums}" id="selctOPT"></apex:selectOptions>

I don't know what CSS,HTML or JavaScript to apply to achieve it. Please HELP!!

Best Answer chosen by fundooMental
fundooMentalfundooMental
So finally I got the code

window.onload = init;
function init() {
tables = document.getElementsByTagName('table');
<!-- tables=document.getElementById("{!$Component.frm.selctCB}") -->
for (i = 0; i < tables.length; i++) {
table = tables[i];
 if (table.className == 'makeRows') {
         makeRows(table, 3);
          }
       }
    }
    
    function makeRows(table, columnCount) {
       cells = table.rows[0].cells;
       cellCount = cells.length;
       rowCount = Math.ceil(cellCount / columnCount);
      
       for (i = 0; i < rowCount; i++) {
          table.insertRow(0);
       }
       for (i = 0; i < cellCount; i++) {
          row = Math.floor(i / columnCount);
          table.rows[row].appendChild(cells[i].cloneNode(true));
       }
       table.deleteRow(rowCount);
    }

All Answers

fundooMentalfundooMental
This was not my requirement. I know about layout="lineDirection", it can only change the orientation. If you read my question again you would understand how exactly I wanted. Anyways since nobody commented I went on to try myself and I guess I have got it. Anyways Thank you
fundooMentalfundooMental
So finally I got the code

window.onload = init;
function init() {
tables = document.getElementsByTagName('table');
<!-- tables=document.getElementById("{!$Component.frm.selctCB}") -->
for (i = 0; i < tables.length; i++) {
table = tables[i];
 if (table.className == 'makeRows') {
         makeRows(table, 3);
          }
       }
    }
    
    function makeRows(table, columnCount) {
       cells = table.rows[0].cells;
       cellCount = cells.length;
       rowCount = Math.ceil(cellCount / columnCount);
      
       for (i = 0; i < rowCount; i++) {
          table.insertRow(0);
       }
       for (i = 0; i < cellCount; i++) {
          row = Math.floor(i / columnCount);
          table.rows[row].appendChild(cells[i].cloneNode(true));
       }
       table.deleteRow(rowCount);
    }
This was selected as the best answer