Admin – Edit CSS To Display Field In Column

• odev

• November 9, 2023 at 8:46 am

I love the feature to display fields with a certain width, I have a field group with a lot of details to input so it helps keep everything on one screen.

However, I’d love to be able to stack fields.

I did try to use the Group field, but moving fields to the group loses data in some instances. I also think it’s probably something I could do with css.

I tried adding this to add styles and I think it works.

However, I can’t figure out how to alter the css without altering the html.

I just want certain divs to display in a column on top of each other, while others display as they were.

Here is a very professional image I made. I can do what the first row does, but not from the second onwards.

Any suggestions?

Also, I am using the following as a snippet to add the css – is that correct too?

function my_acf_input_admin_footer() {
?>

<style>
style goes here
</style>

<?php
}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

• John Huebner

• November 9, 2023 at 9:42 am

I doubt that this is at all possible without using group fields, and yes, existing data will be lost if you move fields into groups.

You cannot modify the HTML, of you change the DOM created by ACF more than likely you will break ACF.

You would need to override existing CSS used by ACF based on the element classes provided by ACF. Some style changes are possible, but in this case it would be extremely difficult and maybe impossible to accomplish.