Display A List Of Radio Boxes In Multiple Columns

I have a php loop that lists 50 radio boxes. I want to put 10 radio boxes on each column. I tried: div style='overflow:hidden; white-space:nowrap; float:left;width:160px;'>

Solution 1:

I've found the best way to deal with splitting check boxes into columns is with the array_chunk() function to split your array into equal sub arrays, and then use a double foreach loop to render the columns.

http://php.net/manual/en/function.array-chunk.php

echo'<div class="container">';
foreach(array_chunk($genreLists,5) as$row_value)
{
  echo'<div class="row">';
  foreach($row_valueas$cell_key => $cell_value)
  {
    echo'<div class="cell">';
    //echo your checkbox html hereecho'</div>'; // close cell
  }
  echo'</div>'; // close row
}
echo'</div>'; // close container

The same concept can be done with the smarty {foreach} loop provided you perform the array_chunk before assigning it to the template engine. Actually in smarty {$var|array_chunk:5} should work as a modifier

If you want to have the check boxes represented vertically, use this function instead:

/* ----------[ func ARRAY CHUNK VERTICAL ]----------
A sister to array_chunk, but instead of horizontal, split
the data vertical
*/functionarray_chunk_vertical($array = null,$cols = 3, $pad = array(null))
{
  if (is_array($array) == trueand !empty($array))
  {
    // total items in the array$count = count($array);
    // if count is emptyif(empty($count))
    {
      returnfalse;
    }
    // if cols is some how still emptyif(empty($cols))
    {
      $cols = 3;
    }
    // count the number of vertical rows$rows = ceil($count/$cols);
    // group the array into colums$array = array_chunk($array,$rows);
    // if the array is less that the number of cols required// pad it to ensure length remains constantif (count($array) < $cols)
    {
      $array = array_pad($array,$cols,$pad);
    }
    // pad the array with a null character as requiredforeach($arrayas$key => $value)
    {
      $array[$key] = array_pad($value,$rows,null);
    }
    // now inverse the rows with the colsforeach($arrayas$key => $value)
    {
      foreach($valueas$sub_key => $sub_value)
      {
        $output[$sub_key][$key] = $sub_value;
      }
    }
    // spit it outreturn$output;
  }
  // oopsreturn$array;
}

Solution 2:

<divclass="Row"><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /><inputtype="radio"name="Row1" /></div><divclass="Row"><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /><inputtype="radio"name="Row2" /></div><divclass="Row"><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /><inputtype="radio"name="Row3" /></div><divclass="Row"><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /><inputtype="radio"name="Row4" /></div><divclass="Row"><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /><inputtype="radio"name="Row5" /></div>