Forums

Hi,
​
We are using a form wizard Checkbox Group to load records from an array. The wizard generates something that loads the records in a recurring single line. So everything works perfectly, however in some cases our users have over 50 items displaying in the checkbox group so there's a lot of scrolling. Is it possible to change the load order so that they will display across three rows? That would reduce the scrolling from 50 rows to 17 rows. The code from the wizard we are using is as follows:
​

<div class="ccms_form_element cfdiv_checkboxgroup radios_over" id="target_tag_container_div" style=""><label for="target_tag" style="color: #dd5645; size:24px !important;">Target Parents<BR>& Stakeholders<BR>by Tag:</label><input type="hidden" name="target_tag" value="" alt="ghost" />
<div style="float:left; clear:none;">

<input type="checkbox" name="target_tag[]" onchange="checkertags()" id="target_tag_all" title="" value="tag_all" class="" />
<label for="target_tag_all"><span style="font-weight:bold; color: #red;">Send to all tags</span></label> 








 <?php
 $options_data = $form->get_array_value($form->data, explode(".", "tag"));
 if(!is_null($options_data) && is_array($options_data)){
 $f_id = 0;
 foreach($options_data as $option_data){
 if(isset($option_data["tag_uid"]) && isset($option_data["tag_name"])){
 echo '<input onchange="checkertags()" type="checkbox" name="target_tag[]" id="target_tag_'.$option_data["tag_uid"].'" title="" value="'.$option_data["tag_uid"].'"'.(in_array($option_data["tag_uid"], array (
  0 => '',
)) ? ' checked="checked"' : '').' class="" />'."\n";
 echo '<label for="target_tag_'.$f_id.'"><span >'.$option_data["tag_name"].'</span></label> '."\n";
 $f_id++;
 }
 }
 }
 ?>
 </div><div class="clear"></div><div id="error-message-target_tag"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div>

​
Thanks a lot.

Hi mapme,
​
You can change the layout to Horizontal and, if necessary, use CSS to restrict the maximum width. That should work and be easier to use but may not be very tidy.
​
Or, you can use custom HTML and lay the checkboxes out in columns using a table - or any other CSS+HTML that you like
​
Bob

https://semantic-ui.com/collections/grid.html