Column Behaviour in Backend

  • Resolved ciateam

    (@ciateam)


    5 years, 8 months ago

    Hi again,

    I have a number of fields that use the column layout to make better use of the space in a front end form.

    My issue is that when rendered in the backend of WP, these columns no longer work as intended and make the fields squashed and difficult to read.

    You can better understand what I mean here (apologies I left my mic on):

    I have tried looking for a solution but

    • Advanced settings do not work with columns, so I cannot choose to hide them on backend
    • The fields are rendered as a table and there is no option to change COLSPAN using css only
    • Columns don’t allow you to add a wrapper class either

    Is there any way to improve their visibility and still retain use of the columns feature?

    Thanks in advance , again 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    5 years, 8 months ago

    Hello,

    Thanks for the feedback! This behavior is not normal. In the back-end, the fields should render wrapped in columns (just like in your front-end). The fields should not be rendered in a table, which makes me think that there is an another plugin or code that is interfering here.

    Here is an example of how it should look like in the backend: Screenshot.

    Try to disable plugins until you find which one is in cause. If the problem remains, try to switch the theme to the native WP Twenty Twenty theme.

    Let me know if you find something.

    Regards.

    Thread Starter ciateam

    (@ciateam)

    5 years, 8 months ago

    This is so weird. I have disabled every plugin except ACF pro and ACFE and switched to the Twenty Twenty theme and it’s still doing it.

    No additional css in customise or new functions in functions.php, I don’t understand where this styling is coming from.

    If I disable ACFE the metabox styling goes away (obviously because columns no longer work, the behaviour is different), but it’s the only plugin that makes a visual change to the backend when disabled no matter which theme I use.

    Any ideas?

    • This reply was modified 5 years, 8 months ago by ciateam.
    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    5 years, 8 months ago

    Hello,

    Can you please share screenshots of the configuration of your fields inside the column?

    Also, please try to create a fresh new field group with 2 columns and 1 text field inside each column.

    There’s probably a configuration in your fields, like custom width or class or something.

    Regards.

    Thread Starter ciateam

    (@ciateam)

    5 years, 8 months ago

    Thanks again for the quick response.

    Here are the screenshots:

    Test columns in new field group seemed to ignore columns too, with / without endpoint.

    https://nimbusweb.me/s/share/4692267/7y5d17ywlkf6wy0uf8ps

    Also, changing any of the settings for the field group: Style, position, label placement, instructions placement does nothing for the backend.

    I’d be happy to give you access to the staging site if that helps?

    • This reply was modified 5 years, 8 months ago by ciateam.
    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    5 years, 8 months ago

    Hello,

    Thanks for the screenshot. Okay there is definitely something fishy in your Theme/WordPress.

    What are those (?) icons near each fields title? Is it an extension on Chrome or something? Maybe that extension modify fields render. Can you try to disable the extension, or use an another browser like Firefox which doesn’t have it?

    Edit: BTW, can you check your console in the admin please, see if you have any JS error?

    Regards.

    Thread Starter ciateam

    (@ciateam)

    5 years, 8 months ago

    Hi, sorry for not explaining, those are tooltips through another ACF plugin.

    I turned all the plugins back on before I took the screenshots, since disabling them had no effect.

    The issue persists in firefox and in chrome with no extensions enabled.

    No JS errors only warnings relating to https being disabled (because the plugin is disabled)

    I’ve made a clone of the site if you want the login?
    https://fbuild.clientsinabundance.com/testarea/wp-login.php

    • This reply was modified 5 years, 8 months ago by ciateam.
    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    5 years, 8 months ago

    Hello,

    Have you checked the console for eventual JS errors?

    Can you join the ACF Slack? It will be easier to discuss there. Here is an invitation link: https://join.slack.com/t/wpacf/shared_invite/enQtODc2MjczMzM3NzQ1LTQxNmY2ZGY3OTU2NDkxNTliYmNhMmY1NDMwZGM4NmYxNzgwZTI5MDUzMDFlMGQ5YzcwNDc0ZWM0MDVmODI4NmI

    I’m always connected there.

    Regards.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    5 years, 8 months ago

    Hello,

    After a discussion with the author, the problem came from the Field Group location which was targeting User Profiles. The Column field isn’t compatible with that screen location for the moment. It is planned for a future release tho.

    A workaround is to not use Column fields for that Field Group, and use the “Override Form Render” setting in the ACF Extended: Forms admin, to render custom HTML with columns on the front-end.

    Regards.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Column Behaviour in Backend’ is closed to new replies.

Tags