Home Forums Add-ons Repeater Field Show repeater fields horizontal next to each other Reply To: Show repeater fields horizontal next to each other

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