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

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

  • 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  */
    }
  • @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.