12-Column Grid & Builder

This topic has 6 replies, 2 voices, and was last updated 1 year, 8 months ago by Long Nguyen.

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

Author

Posts

August 15, 2022 at 9:47 PM #37507

Participant

On the General tab for defining a custom field within MB Builder, there is a "Columns" field I need to know how to use. I can't find anything in the Builder documentation and the Columns documentation only addresses the coding method. My use case is that I have three fields that should appear in one row. I have tried creating a Group field with a Columns value of "12" and creating three subfields, each with a Columns value of "4." But the fields still flow vertically rather than horizontally. What am I doing wrong?

August 16, 2022 at 11:30 AM #37514

Long Nguyen

Moderator

Hi,

Simply, the columns help you to display custom fields in one row. Each row has 12 columns to display the custom fields. On my demo site, the subfields display in one row as well, each field has 4 columns, screenshot https://imgur.com/mexN5wV

Here is the demo code

            [
                'name'   => __( 'Group', 'your-text-domain' ),
                'id'     => $prefix . 'group_5nroxep0cgx',
                'type'   => 'group',
                'fields' => [
                    [
                        'name'    => __( 'Checkbox', 'your-text-domain' ),
                        'id'      => $prefix . 'checkbox_ywnepw1ssi',
                        'type'    => 'checkbox',
                        'columns' => 4,
                    ],
                    [
                        'name'    => __( 'Text', 'your-text-domain' ),
                        'id'      => $prefix . 'text_zpqlfple9wo',
                        'type'    => 'text',
                        'columns' => 4,
                    ],
                    [
                        'name'    => __( 'Textarea', 'your-text-domain' ),
                        'id'      => $prefix . 'textarea_fbep3a9emi4',
                        'type'    => 'textarea',
                        'columns' => 4,
                    ],
                ],
            ],

Can you please share the code that creates the custom fields on your site? Refer to this documentation https://docs.metabox.io/extensions/meta-box-builder/#getting-php-code

August 16, 2022 at 10:14 PM #37525

Cynthia Conser

Participant

Here is the code. It is for selecting a date; I can't use the date picker field because the dates are historical (before 1900).

           [
                'name'   => __( 'Date 1 Group', 'your-text-domain' ),
                'id'     => $prefix . 'date_1_group',
                'type'   => 'group',
                'fields' => [
                    [
                        'name'    => __( 'Day', 'your-text-domain' ),
                        'id'      => $prefix . 'day1',
                        'type'    => 'select_advanced',
                        'options' => [
                            1  => __( '1', 'your-text-domain' ),
                            2  => __( '2', 'your-text-domain' ),
                            3  => __( '3', 'your-text-domain' ),
                            4  => __( '4', 'your-text-domain' ),
                            5  => __( '5', 'your-text-domain' ),
                            6  => __( '6', 'your-text-domain' ),
                            7  => __( '7', 'your-text-domain' ),
                            8  => __( '8', 'your-text-domain' ),
                            9  => __( '9', 'your-text-domain' ),
                            10 => __( '10', 'your-text-domain' ),
                            11 => __( '11', 'your-text-domain' ),
                            12 => __( '12', 'your-text-domain' ),
                            13 => __( '13', 'your-text-domain' ),
                            14 => __( '14', 'your-text-domain' ),
                            15 => __( '15', 'your-text-domain' ),
                            16 => __( '16', 'your-text-domain' ),
                            17 => __( '17', 'your-text-domain' ),
                            18 => __( '18', 'your-text-domain' ),
                            19 => __( '19', 'your-text-domain' ),
                            20 => __( '20', 'your-text-domain' ),
                            21 => __( '21', 'your-text-domain' ),
                            22 => __( '22', 'your-text-domain' ),
                            23 => __( '23', 'your-text-domain' ),
                            24 => __( '24', 'your-text-domain' ),
                            25 => __( '25', 'your-text-domain' ),
                            26 => __( '26', 'your-text-domain' ),
                            27 => __( '27', 'your-text-domain' ),
                            28 => __( '28', 'your-text-domain' ),
                            29 => __( '29', 'your-text-domain' ),
                            30 => __( '30', 'your-text-domain' ),
                            31 => __( '31', 'your-text-domain' ),
                        ],
                        'columns' => 4,
                    ],
                    [
                        'name'    => __( 'Month', 'your-text-domain' ),
                        'id'      => $prefix . 'month1',
                        'type'    => 'select_advanced',
                        'options' => [
                            1  => __( 'January', 'your-text-domain' ),
                            2  => __( 'February', 'your-text-domain' ),
                            3  => __( 'March', 'your-text-domain' ),
                            4  => __( 'April', 'your-text-domain' ),
                            5  => __( 'May', 'your-text-domain' ),
                            6  => __( 'June', 'your-text-domain' ),
                            7  => __( 'July', 'your-text-domain' ),
                            8  => __( 'August', 'your-text-domain' ),
                            9  => __( 'September', 'your-text-domain' ),
                            10 => __( 'October', 'your-text-domain' ),
                            11 => __( 'November', 'your-text-domain' ),
                            12 => __( 'December', 'your-text-domain' ),
                        ],
                        'columns' => 4,
                    ],
                    [
                        'name'    => __( 'Year', 'your-text-domain' ),
                        'id'      => $prefix . 'year',
                        'type'    => 'number',
                        'columns' => 4,
                    ],
                ],
            ],

August 16, 2022 at 10:39 PM #37528

Cynthia Conser

Participant

Also, is it necessary to use the group field for this to work? I need for the dates to appear in the admin columns and just realized that won't happen if they are subfields of a group. Thanks!

August 17, 2022 at 10:46 AM #37540

Long Nguyen

Moderator

Hi,

That code creates 3 subfields and displays them in 3 columns as well, screenshot https://imgur.com/1BiRVVh
You can try to deactivate all plugins except Meta Box, MB extensions and re-check this issue.

If you want to display a custom field in the admin column, please use it as a top field. The extension MB Admin Columns is not working with subfields in a group.

August 18, 2022 at 12:41 AM #37553

Cynthia Conser

Participant

Thanks for your response. I tried deactivating other plugins, but it didn't help. It's more important to me that the fields appear in the admin columns than that they display horizontally on the form, so I will abandon this effort.

August 18, 2022 at 3:54 PM #37562

Long Nguyen

Moderator

Ok, let me know if you have any questions.

Author

Posts

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

You must be logged in to reply to this topic.