Create a flexible content with various widths in the back-end

• Viande

• October 24, 2018 at 4:08 am

Hello,

I’ve created a flexible content with different layouts.
Each layout including one custom field.

Target : I set some width as attributes for each of these custom fields (50%, 100%, 58% (7 col)), but when I switch to a Post (on the back-office), it’s setting the width of this at 100% as it’s the Layout width.
This is only to make a more intuitive back-office for my customers.

Do you know if it’s possible to do that ?

Thanks,
Vianney.

Here’s a screenshot of ACF settings : https://ibb.co/b6x43A

• John Huebner

• October 24, 2018 at 6:46 am

The width you are setting only affect the width of a field within the layout and it will only effect how all the fields in that layout will look. There isn’t a way to have the layouts themselves have different widths.

• Viande

• October 25, 2018 at 7:19 pm

Ok, it would be great as a future feature then :).
Thanks for your reply John !

• Thomas

• October 25, 2018 at 8:59 pm

Each layout in a flexible content is wrapped in a div with a data attribute data-layout="NAME_OF_LAYOUT".

You can include a css file for the back-end and set your desired width for the layout like this:

.acf-flexible-content .layout[data-layout="NAME_OF_LAYOUT"] {
    width: 500px; /* Your desired width */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

• Viande

• October 30, 2018 at 8:40 pm

Hello Thomas,

Thank you for your advice !
Just one question though, how can I include this css file for the back-end?

Thanks!

• Thomas

• October 30, 2018 at 9:12 pm

Use the admin_enqueue_scripts action like this

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

More information you will find in WordPress codex https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

• Viande

• October 31, 2018 at 2:04 am

Wow, thanks a lot Thomas.
It’s working perfectly 🙂 !

Check this out : https://postimg.cc/VrqskFsP