Support

Account

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

Solving

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

  • 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.

  • 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.

  • 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.

  • 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.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘How to use Checkbox and Radio in 2, 3 or 4 columns’ is closed to new replies.