Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author bogdand

    (@bogdand)

    Hi dinhcode,

    Can you upload any screenshots with how it behaves and then what you’re trying to achieve?

    Regards,
    Bogdan

    jzatt

    (@jzatt)

    Old post, but I’m seeing what I think is the same as the author…
    These two fields (Facebook / Instagram) has the width set to 50% in ACF. The accordion plugin messes with the margin between them.

    Screenshot

    Here is the same fields without the accordion field…

    Screenshot

    Not a big deal, but having more fields in row makes it look even worse. For example four fields with 25% width each.

    jzatt

    (@jzatt)

    Did some further investigation to this and just found the problem/solution…

    ACF has the CSS styling for the fields like this:
    .acf-fields > .acf-field { padding: 15px 12px; ... }
    Using the accordion plugin nests the fields deeper, so the CSS will not target them.

    The problem in this case is that the padding isn’t applied, so I added some CSS in my own custom file that I have loaded in the admin like this to get the same padding:

    .acf-accordion-group.opened > .acf-field { padding: 15px 12px; }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘ACF Accordion Error Css if set fields width %’ is closed to new replies.