How to use Checkbox and Radio in 2, 3 or 4 columns

• 

  • edir

  • August 13, 2015 at 12:39 am

  This is how I make columns for checkbox and radio elements, it’s CSS3 supports only, but bad users will see in one column.

  Stylesheet admin.css

  /* Columns for Checkbox and Radio */
  .acf-field-checkbox.two-columns ul,
  .acf-field-radio.two-columns ul,
  .acf-field-checkbox.three-columns ul,
  .acf-field-radio.three-columns ul,
  .acf-field-checkbox.four-columns ul,
  .acf-field-radio.four-columns ul { 
  	-webkit-column-gap: 20px;
  	-moz-column-gap: 20px;
  	column-gap: 20px;
  }
  
  .acf-field-checkbox.two-columns ul,
  .acf-field-radio.two-columns ul {
  	-webkit-column-count: 2;
  	-moz-column-count: 2; 
  	column-count: 2;
  }
  
  .acf-field-checkbox.three-columns ul,
  .acf-field-radio.three-columns ul {
  	-webkit-column-count: 3;
  	-moz-column-count: 3; 
  	column-count: 3;
  }
  
  .acf-field-checkbox.four-columns ul,
  .acf-field-radio.four-columns ul {
  	-webkit-column-count: 4;
  	-moz-column-count: 4; 
  	column-count: 4;
  }
  
  @media screen and (max-width: 782px) {
  	.acf-field-checkbox.two-columns ul,
  	.acf-field-radio.two-columns ul,
  	.acf-field-checkbox.three-columns ul,
  	.acf-field-radio.three-columns ul,
  	.acf-field-checkbox.four-columns ul,
  	.acf-field-radio.four-columns ul { 
  		-webkit-column-count: auto;
  		-moz-column-count: auto;
  		column-count: auto;
  		-webkit-column-gap: normal;
  		-moz-column-gap: normal;
  		column-gap: normal;
  	}
  }

  Adding Stylesheet to Admin Panel

  function admin_style() {
  	wp_enqueue_style('admin_style', 'path/to/admin.css'); 
  }
  add_action('admin_init', 'admin_style');

  To use it, go to Wrapper Attributes on your field and set the Classname to two-columns, three-columns or four-columns at your choice. The result is like in the image attached.

  

  Captura-de-T....png

  
  
• 

  

  • Jonathan

  • August 13, 2015 at 8:41 am

  Hi @edir

  Thank you for a nice little tip/snippet 🙂

  Some food for thought. You might want to consider adding different layouts for smaller screens. perhaps make sure that 3 and 4 cols end up as 2 cols if the screen is small to avoid overlap.
• 

  • edir

  • August 13, 2015 at 8:59 am

  This is difficult because @media works only with screen size and not element size and WordPress interface has columns. I don’t want to use JavaScript to make this much pretty, so I just used the screen size 782px that is the WP mobile setup. And the number of columns will depend in how large the text is on each option too. It’s not perfect but it works in most of my situations.
• 

  

  • Jonathan

  • August 13, 2015 at 9:03 am

  Yeah of course you’d just have to go by the WP standard breakpoints in admin. One can never accommodate for all possible variations. It’s the same for setting layouts with percentage-widths in ACF.. sure you can set 5 fields in a row but on smaller screens you will have a problem.