Reply To: Show repeater fields horizontal next to each other

• Colin

• April 17, 2018 at 2:59 am

I know this is an old thread, but just in case anyone else is hoping to achieve this UI effect, this is what I did:

Most sites I build and manage include a custom WP Admin stylesheet. It’s really easy to add via the active theme’s functions.php. The stylesheet can be named anything you want, and placed anywhere in the theme directory:

function admin_theme_style()
{
  wp_enqueue_style( 'admin-theme', get_stylesheet_directory_uri() . '/path/to/wp-admin.css' );
}
add_action('admin_enqueue_scripts', 'admin_theme_style');
add_action('login_enqueue_scripts', 'admin_theme_style');

And then in my admin stylesheet, I have the following style rule:

/* ACF "half-repeater" class, display repeaters in horizontal columns */
.half-repeater .acf-repeater tr.acf-row:not(.acf-clone)
{
    display: inline-block !important;
    width: 50% !important;
}

    .half-repeater .acf-repeater tr.acf-row:not(.acf-clone) td.acf-fields
    {
        width: 100%;
    }

Obviously you need to add your custom class to the repeater field when you create it. In my example I gave my repeater the half-repeater class, and styled it accordingly. You could do 3 or 4 columns just as easily.

This approach works for both “block” and “row” repeater display options, although I personally think it looks best with “block” display.

Hope this helps someone else.

Cheers!