Show repeater fields horizontal next to each other

• [email protected]

• November 4, 2015 at 7:39 am

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!

• prebyter

• August 31, 2018 at 1:16 am

@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 🙂

• jwight1234

• November 25, 2018 at 5:10 pm

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;
}

• feriglesias

• February 22, 2019 at 11:38 pm

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.

• VincentH

• July 29, 2019 at 10:53 pm

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