Support

Account

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

Solving

Show repeater fields horizontal next to each other

  • hy,

    i am working on a repeater field that holds a flexible content field in each instance to build a multi-column layout at frontend.
    the problem is, that the repeater-instances are shown vertically aligned, one below another. so it is hard to recognize in which “frontend-column” you are currently working in the backend.

    unfortunately i can’t find any workarounds to this. of course i could clone the flexible-content field for the needed amount of columns, but that makes the fields very hard to maintain.

    any help appreciated 🙂

    matt

    • James

    • June 19, 2016 at 11:39 pm

    Hi @matthias-wagnerfalkemedia-at ,

    Thanks for reaching out.

    You could switch the repeater layout to block or row in order to adjust how the items are displayed.

    Hope this helps.

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

  • @colinsafranek thanks for providing your code.

    I’ve optimized it a little bit, to be more flexible with the amount of columns:

    /* ACF "repeat-horizontal" class, display repeaters in horizontal columns */
    .repeat-horizontal .acf-repeater tbody {
        display: flex;
        flex-direction: row;
    }
    .repeat-horizontal .acf-repeater tr.acf-row:not(.acf-clone) {
        width: 100%;
    }
    .repeat-horizontal .acf-repeater tr.acf-row:not(.acf-clone) td.acf-fields {
        width: 100% !important; /* important is necessary because it gets overwritten on drag&drop  */
    }
    • Colin

    • August 31, 2018 at 4:40 am

    @prebyter Nice! I love the Flex approach. Thanks for sharing 🙂

  • for hover and border

    .repeat-horizontal .acf-repeater tr.acf-row:hover {
        z-index: 10 !important;
    }
    
    .repeat-horizontal .acf-repeater .acf-row-handle.remove {
        border-right: 1px solid #E1E1E1;
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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.