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;
    }
  • Cooool! It works! Thanks for sharing!!!
    I use grid instead of flex.

    .repeat-horizontal .acf-repeater tbody {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; //set number of columns
    }

    Great plugin, great support, great community.

  • @prebyter ‘s code gave me a good base to change the UI a bit. I expanded the code a little more for any UI flaws that come with it. My max items next to eachother is set to 4, with max repeater items set to 8.

    /* 
     * ACF "repeat-horizontal" class, display repeaters in horizontal columns 
     */
    .repeat-horizontal .acf-repeater tbody {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .repeat-horizontal .acf-repeater tr.acf-row:not(.acf-clone) {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 21%; /* 21% because 25% gives CSS bugs when content pushes width and not 20 because we want the max to be 4 */
        border-bottom: 1px solid #eee;
    }
    .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  */
    }
    .repeat-horizontal .acf-repeater .acf-row-handle,
    .repeat-horizontal .acf-repeater .acf-fields{
        border-width: 0px 0px 0px 1px;
    }
    .repeat-horizontal .acf-repeater .acf-row-handle.order{
        min-width: 10px; /* to stop breaking layout if we keep the max rows bellow 10 */
    }
    .repeat-horizontal .acf-repeater .acf-row:last-child .acf-row-handle{
        border-width: 0px;
    }
    .repeat-horizontal .acf-repeater .acf-row-handle .acf-icon{
        position: relative;
        margin: 10px 0;
    }
    .repeat-horizontal .acf-repeater .acf-row:hover .acf-row-handle .acf-icon{
        display: none; /* remove standard annoying hover */
    }
    .repeat-horizontal .acf-repeater .acf-row-handle.remove:hover .acf-icon{
        display: block; /* re-apply hover on set block */
    }
Viewing 8 posts - 1 through 8 (of 8 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.