Enhancement Request: Group fields in metaboxes using CSS GRID & FLEXBOX

This topic has 2 replies, 3 voices, and was last updated 1 month, 2 weeks ago by Anh Tran.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
February 9, 2024 at 6:19 AM #44519

maybeadev
Participant

I could not find a forum for 'suggestions' so posting here with a clear title.

I am requesting that we be able to use CSS GRID and FLEXBOX to group fields inside of a metabox.

I know we can use columns but, for complex styling, layouts etc., that's still limiting.

I tried creating my own equivalent custom_html field but the markup renders too far inside, after the metabox.io group wrappers.

So, it looks like this type of enhancement requires both an add-on and/or a change to the core metabox plugin since it will have to render markup around the default metabox.io wrappers.

Thanks for considering.

Add New Note to this Reply

February 9, 2024 at 10:14 PM #44528

Peter
Moderator

Hello,

Thank you for your suggestion. I understand you want to use the CSS Grid or Flexbox to display custom fields in the admin area to get more effective. I will inform the development team to consider supporting this feature in future updates.

Add New Note to this Reply

June 8, 2024 at 9:23 AM #45624

Anh Tran
Keymaster

Hi,

Thanks for your suggestion. After a careful thought about this, we found that changing the markup + css for the fields is risky and might break thousands of websites. Note that currently Meta Box is using flexbox already (and when we changed to flexbox - which is a minor change - it also affected a lot of websites and we got some complaints about this).

Regarding your request about grid + groups + columns to build complex layout/styling, it's very hard to "just implement" the grid without knowing the requirements. It's not just about columns, but also about nested columns/grids/groups, which can be very complicated and hard to debug when something is wrong.

In this case, we'd like to suggest you to use these filters to change the markup for fields:

https://docs.metabox.io/filters/rwmb-wrapper-html/
https://docs.metabox.io/filters/rwmb-begin-html/
https://docs.metabox.io/filters/rwmb-end-html/

Or better, write a custom field type that gives you the flexibility of defining your own markup:

https://docs.metabox.io/creating-new-field-types/

Add New Note to this Reply
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.