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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
ACF wouldn’t be so widely used in WordPress if it didn’t have some pretty amazing capabilities. In this article, we look at a few of the features we’ll discuss during “7 things you didn’t know you could do with ACF” at #WPEDecode later this month. https://t.co/5lnsTxp81j pic.twitter.com/Yf0ThPG1QG
— Advanced Custom Fields (@wp_acf) March 16, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.