Columns and Tabs issue

This topic has 7 replies, 2 voices, and was last updated 9 years, 2 months ago by Anh Tran.

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

Author

Posts

August 8, 2015 at 3:33 AM #1183

Participant

Hello,

I recently purchased the columns extention. I am using it with the extensions tab but it seems to be not working. If I add columns in the second tab the CSS get messed up and once I switch to the second one I can't switch back to the first one. I can give the FTP access so that you can look it yourself.

Please let me know ..

Thanks,
Zain

August 10, 2015 at 3:24 PM #1199

Anh Tran

Keymaster

Can you please show me the code to register meta boxes? Also, is there any errors in the console?

August 18, 2015 at 1:02 AM #1243

zainsohail19

Participant

Hello Anh, sorry for the late reply. Below is the code ..

<?php

/**
 * Creating Metaboxes for posts.
 * @return [array]             [Metabox Parameters]
 */

function talent_metaboxes( $meta_boxes )
{
    $prefix = 'talent_';

    // Post Quiz Metaboxes
    $meta_boxes[] = array(
        'title'    => 'Talent Details',
        'id'       => 'talent_attributes',
        'pages'    => array( 'talent' ),
        'context'  => 'normal',
        'priority' => 'high',
        'tabs'     => array(
            'about' => array(
                'label' => __( 'About', 'rwmb' ),
                'icon'  => 'dashicons-admin-users', // Dashicon
            ),
            'resume'  => array(
                'label' => __( 'Resume', 'rwmb' ),
                'icon'  => 'dashicons-welcome-learn-more', // Dashicon
            ),
            'work'  => array(
                'label' => __( 'Work', 'rwmb' ),
                'icon'  => 'dashicons-admin-page', // Dashicon
            ),
            'photos'  => array(
                'label' => __( 'Photos', 'rwmb' ),
                'icon'  => 'dashicons-format-gallery', // Dashicon
            ),
            'ie-resume'  => array(
                'label' => __( 'Import/Export Resume', 'rwmb' ),
                'icon'  => 'dashicons-media-default', // Dashicon
            ),
        ),
        
        // Tab style: 'default', 'box' or 'left'. Optional
        'tab_style' => 'box',
        'fields' => array( 

            /* ABOUT TAB */
            array(
                'name'  => 'First Name',
                'desc'  => '',
                'id'    => $prefix . 'first_name',
                'type'  => 'text',
                'class' => 'talent-details talent_first_name',
                'clone' => false,
                'columns' => 3,
                'tab'  => 'about'
            ),
            
            array(
                'name'  => 'Last Name',
                'desc'  => '',
                'id'    => $prefix . 'last_name',
                'type'  => 'text',
                'class' => 'talent-details talent_last_name',
                'clone' => false,
                'columns' => 3,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Active',
                'desc'  => '',
                'id'    => $prefix . 'active',
                'type'  => 'checkbox',
                'class' => 'talent-details talent_active',
                'clone' => false,
                'columns' => 2,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Featured',
                'desc'  => '',
                'id'    => $prefix . 'featured',
                'type'  => 'checkbox',
                'class' => 'talent-details talent_featured',
                'clone' => false,
                'columns' => 2,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Hide Age',
                'desc'  => '',
                'id'    => $prefix . 'hide_age',
                'type'  => 'checkbox',
                'class' => 'talent-details talent_hide_age',
                'clone' => false,
                'columns' => 2,
                'tab'  => 'about'
            ),            
            
            array(
                'name'  => 'Description',
                'desc'  => '',
                'id'    => $prefix . 'description',
                'type'  => 'wysiwyg',
                'class' => 'talent-details talent_description',
                'clone' => false,
                'columns' => 12,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Gender',
                'desc'  => '',
                'id'    => $prefix . 'gender',
                'type'    => 'select',
                'options' => array(
                    'male' => 'Male',
                    'female' => 'Female',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_gender',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Ethnicity',
                'desc'  => '',
                'id'    => $prefix . 'ethnicity',
                'type'    => 'select',
                'options' => array(
                    'African American' => 'African American',
                    'Asian' => 'Asian',
                    'Caucasian' => 'Caucasian',
                    'Latino' => 'Latino',
                    'Other' => 'Other',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_ethnicity',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Secondary Ethnicity',
                'desc'  => '',
                'id'    => $prefix . 'secondary_ethnicity',
                'type'    => 'select',
                'options' => array(
                    'African American' => 'African American',
                    'Asian' => 'Asian',
                    'Caucasian' => 'Caucasian',
                    'Latino' => 'Latino',
                    'Other' => 'Other',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_secondary_ethnicity',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Tertiary Ethnicity',
                'desc'  => '',
                'id'    => $prefix . 'tertiary_ethnicity',
                'type'    => 'select',
                'options' => array(
                    'African American' => 'African American',
                    'Asian' => 'Asian',
                    'Caucasian' => 'Caucasian',
                    'Latino' => 'Latino',
                    'Other' => 'Other',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_tertiary_ethnicity',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Hair Color',
                'desc'  => '',
                'id'    => $prefix . 'hair_color',
                'type'    => 'select',
                'options' => array(
                    'Black' => 'Black',
                    'Blonde' => 'Blonde',
                    'Brown' => 'Brown',
                    'Grey' => 'Grey',
                    'Red' => 'Red',
                    'Salt & Pepper' => 'Salt & Pepper',
                    'White' => 'White',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_hair_color',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Eye color',
                'desc'  => '',
                'id'    => $prefix . 'eye_color',
                'type'    => 'select',
                'options' => array(
                    'Black' => 'Black',
                    'Blue' => 'Blue',
                    'Brown' => 'Brown',
                    'Green' => 'Green',
                    'Grey' => 'Grey',
                    'Hazel' => 'Hazel',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_eye_color',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'DOB',
                'desc'  => '',
                'id'    => $prefix . 'dob',
                'type'    => 'date',
                'class' => 'talent-details talent_dob',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Additional Range',
                'desc'  => '',
                'id'    => $prefix . 'additional_range',
                'type'    => 'select',
                'options' => array(
                    'Can play younger' => 'Can play younger',
                    'Can play older' => 'Can play older',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_additional_range',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Height',
                'desc'  => '',
                'id'    => $prefix . 'height',
                'type'    => 'text',
                'class' => 'talent-details talent_height',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Weight (lbs)',
                'desc'  => '',
                'id'    => $prefix . 'weight',
                'type'    => 'text',
                'class' => 'talent-details talent_weight',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Website',
                'desc'  => '',
                'id'    => $prefix . 'website',
                'type'    => 'url',
                'class' => 'talent-details talent_website',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            /* RESUME TAB */ 
            array(
                'name'  => 'Header',
                'desc'  => '',
                'id'    => $prefix . 'resume_header',
                'type'  => 'text',
                'class' => '',
                'clone' => true,
                'sort_clone' => true,
                'tab'  => 'resume'
            ),

            array(
                'name'  => 'Data',
                'desc'  => '',
                'id'    => $prefix . 'resume_data',
                'type'  => 'text',
                'class' => '',
                'clone' => true,
                'sort_clone' => true,
                'tab'  => 'resume'
            ),

            /* WORK TAB */ 
            array(
                'name'  => 'Voice Over',
                'desc'  => '',
                'id'    => $prefix . 'work_voiceover',
                'type'  => 'file',
                'class' => 'talent-details talent_work_voiceover',
                'clone' => false,
                'tab'  => 'work'
            ),

            array(
                'name'  => 'Theatrical Reel',
                'desc'  => '',
                'id'    => $prefix . 'work_theatrical_reel',
                'type'  => 'url',
                'class' => 'talent-details talent_work_theatrical_reel',
                'clone' => false,
                'sort_clone' => false,
                'tab'  => 'work'
            ),

            array(
                'name'  => 'Commercial Reel',
                'desc'  => '',
                'id'    => $prefix . 'work_commercial_reel',
                'type'  => 'url',
                'class' => 'talent-details talent_work_commercial_reel',
                'clone' => false,
                'sort_clone' => false,
                'tab'  => 'work'
            ),

            array(
                'name'  => 'Hosting Reel',
                'desc'  => '',
                'id'    => $prefix . 'work_hosting_reel',
                'type'  => 'url',
                'class' => 'talent-details talent_work_commercial_reel',
                'clone' => false,
                'sort_clone' => false,
                'tab'  => 'work'
            ),

            /* PHOTOS TAB */ 
            array(
                'name'  => 'Photos',
                'desc'  => '',
                'id'    => $prefix . 'work_voiceover',
                'type'  => 'image_advanced',
                'class' => 'talent-details talent_work_voiceover',
                'clone' => false,
                'tab'  => 'photos'
            ),
        ) 
    );

    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'talent_metaboxes' );

August 18, 2015 at 1:30 AM #1244

zainsohail19

Participant

Sorry the code provided above is the one I used without columns, below is the code which is not working correctly. The console in Chrome Dev Tools is empty, it shows blank page.

<?php

/**
 * Creating Metaboxes for posts.
 * @return [array]             [Metabox Parameters]
 */

function talent_metaboxes( $meta_boxes )
{
    $prefix = 'talent_';

    // Post Quiz Metaboxes
    $meta_boxes[] = array(
        'title'    => 'Talent Details',
        'id'       => 'talent_attributes',
        'pages'    => array( 'talent' ),
        'context'  => 'normal',
        'priority' => 'high',
        'tabs'     => array(
            'about' => array(
                'label' => __( 'About', 'rwmb' ),
                'icon'  => 'dashicons-admin-users', // Dashicon
            ),
            'resume'  => array(
                'label' => __( 'Resume', 'rwmb' ),
                'icon'  => 'dashicons-welcome-learn-more', // Dashicon
            ),
            'work'  => array(
                'label' => __( 'Work', 'rwmb' ),
                'icon'  => 'dashicons-admin-page', // Dashicon
            ),
            'photos'  => array(
                'label' => __( 'Photos', 'rwmb' ),
                'icon'  => 'dashicons-format-gallery', // Dashicon
            ),
            'ie-resume'  => array(
                'label' => __( 'Import/Export Resume', 'rwmb' ),
                'icon'  => 'dashicons-media-default', // Dashicon
            ),
        ),
        
        // Tab style: 'default', 'box' or 'left'. Optional
        'tab_style' => 'box',
        'fields' => array( 

            /* ABOUT TAB */
            array(
                'name'  => 'First Name',
                'desc'  => '',
                'id'    => $prefix . 'first_name',
                'type'  => 'text',
                'class' => 'talent-details talent_first_name',
                'clone' => false,
                'columns' => 3,
                'tab'  => 'about'
            ),
            
            array(
                'name'  => 'Last Name',
                'desc'  => '',
                'id'    => $prefix . 'last_name',
                'type'  => 'text',
                'class' => 'talent-details talent_last_name',
                'clone' => false,
                'columns' => 3,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Active',
                'desc'  => '',
                'id'    => $prefix . 'active',
                'type'  => 'checkbox',
                'class' => 'talent-details talent_active',
                'clone' => false,
                'columns' => 2,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Featured',
                'desc'  => '',
                'id'    => $prefix . 'featured',
                'type'  => 'checkbox',
                'class' => 'talent-details talent_featured',
                'clone' => false,
                'columns' => 2,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Hide Age',
                'desc'  => '',
                'id'    => $prefix . 'hide_age',
                'type'  => 'checkbox',
                'class' => 'talent-details talent_hide_age',
                'clone' => false,
                'columns' => 2,
                'tab'  => 'about'
            ),            
            
            array(
                'name'  => 'Description',
                'desc'  => '',
                'id'    => $prefix . 'description',
                'type'  => 'wysiwyg',
                'class' => 'talent-details talent_description',
                'clone' => false,
                'columns' => 12,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Gender',
                'desc'  => '',
                'id'    => $prefix . 'gender',
                'type'    => 'select',
                'options' => array(
                    'male' => 'Male',
                    'female' => 'Female',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_gender',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Ethnicity',
                'desc'  => '',
                'id'    => $prefix . 'ethnicity',
                'type'    => 'select',
                'options' => array(
                    'African American' => 'African American',
                    'Asian' => 'Asian',
                    'Caucasian' => 'Caucasian',
                    'Latino' => 'Latino',
                    'Other' => 'Other',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_ethnicity',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Secondary Ethnicity',
                'desc'  => '',
                'id'    => $prefix . 'secondary_ethnicity',
                'type'    => 'select',
                'options' => array(
                    'African American' => 'African American',
                    'Asian' => 'Asian',
                    'Caucasian' => 'Caucasian',
                    'Latino' => 'Latino',
                    'Other' => 'Other',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_secondary_ethnicity',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Tertiary Ethnicity',
                'desc'  => '',
                'id'    => $prefix . 'tertiary_ethnicity',
                'type'    => 'select',
                'options' => array(
                    'African American' => 'African American',
                    'Asian' => 'Asian',
                    'Caucasian' => 'Caucasian',
                    'Latino' => 'Latino',
                    'Other' => 'Other',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_tertiary_ethnicity',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Hair Color',
                'desc'  => '',
                'id'    => $prefix . 'hair_color',
                'type'    => 'select',
                'options' => array(
                    'Black' => 'Black',
                    'Blonde' => 'Blonde',
                    'Brown' => 'Brown',
                    'Grey' => 'Grey',
                    'Red' => 'Red',
                    'Salt & Pepper' => 'Salt & Pepper',
                    'White' => 'White',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_hair_color',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Eye color',
                'desc'  => '',
                'id'    => $prefix . 'eye_color',
                'type'    => 'select',
                'options' => array(
                    'Black' => 'Black',
                    'Blue' => 'Blue',
                    'Brown' => 'Brown',
                    'Green' => 'Green',
                    'Grey' => 'Grey',
                    'Hazel' => 'Hazel',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_eye_color',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'DOB',
                'desc'  => '',
                'id'    => $prefix . 'dob',
                'type'    => 'date',
                'class' => 'talent-details talent_dob',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Additional Range',
                'desc'  => '',
                'id'    => $prefix . 'additional_range',
                'type'    => 'select',
                'options' => array(
                    'Can play younger' => 'Can play younger',
                    'Can play older' => 'Can play older',
                ),
                'placeholder' => 'Select',
                'class' => 'talent-details talent_additional_range',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Height',
                'desc'  => '',
                'id'    => $prefix . 'height',
                'type'    => 'text',
                'class' => 'talent-details talent_height',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Weight (lbs)',
                'desc'  => '',
                'id'    => $prefix . 'weight',
                'type'    => 'text',
                'class' => 'talent-details talent_weight',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            array(
                'name'  => 'Website',
                'desc'  => '',
                'id'    => $prefix . 'website',
                'type'    => 'url',
                'class' => 'talent-details talent_website',
                'clone' => false,
                'columns' => 4,
                'tab'  => 'about'
            ),

            /* RESUME TAB */ 
            array(
                'name'  => 'Header',
                'desc'  => '',
                'id'    => $prefix . 'resume_header',
                'type'  => 'text',
                'class' => '',
                'clone' => true,
                'sort_clone' => true,
                'columns' => 12,
                'tab'  => 'resume'
            ),

            array(
                'name'  => '',
                'desc'  => '',
                'id'    => $prefix . 'resume_data',
                'type'  => 'text',
                'class' => '',
                'clone' => true,
                'sort_clone' => true,
                'columns' => 4,
                'tab'  => 'resume'
            ),

            array(
                'name'  => '',
                'desc'  => '',
                'id'    => $prefix . 'resume_data',
                'type'  => 'text',
                'class' => '',
                'clone' => true,
                'sort_clone' => true,
                'columns' => 4,
                'tab'  => 'resume'
            ),

            array(
                'name'  => '',
                'desc'  => '',
                'id'    => $prefix . 'resume_data',
                'type'  => 'text',
                'class' => '',
                'clone' => true,
                'sort_clone' => true,
                'columns' => 4,
                'tab'  => 'resume'
            ),

            /* WORK TAB */ 
            array(
                'name'  => 'Voice Over',
                'desc'  => '',
                'id'    => $prefix . 'work_voiceover',
                'type'  => 'file',
                'class' => 'talent-details talent_work_voiceover',
                'clone' => false,
                'tab'  => 'work'
            ),

            array(
                'name'  => 'Theatrical Reel',
                'desc'  => '',
                'id'    => $prefix . 'work_theatrical_reel',
                'type'  => 'url',
                'class' => 'talent-details talent_work_theatrical_reel',
                'clone' => false,
                'sort_clone' => false,
                'tab'  => 'work'
            ),

            array(
                'name'  => 'Commercial Reel',
                'desc'  => '',
                'id'    => $prefix . 'work_commercial_reel',
                'type'  => 'url',
                'class' => 'talent-details talent_work_commercial_reel',
                'clone' => false,
                'sort_clone' => false,
                'tab'  => 'work'
            ),

            array(
                'name'  => 'Hosting Reel',
                'desc'  => '',
                'id'    => $prefix . 'work_hosting_reel',
                'type'  => 'url',
                'class' => 'talent-details talent_work_commercial_reel',
                'clone' => false,
                'sort_clone' => false,
                'tab'  => 'work'
            ),

            /* PHOTOS TAB */ 
            array(
                'name'  => 'Photos',
                'desc'  => '',
                'id'    => $prefix . 'work_voiceover',
                'type'  => 'image_advanced',
                'class' => 'talent-details talent_work_voiceover',
                'clone' => false,
                'tab'  => 'photos'
            ),
        ) 
    );

    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'talent_metaboxes' );

August 18, 2015 at 8:20 PM #1245

Anh Tran

Keymaster

I just found the problem. When you added columns, the total columns in one row must be exactly 12. In the code above, the last row of the About tab has only 8 columns. Here is the fixed code (I added a custom_html field, which doesn't output anything, it's just there to make sure total columns equals 12):

http://pastebin.com/q4s2i5Xj

August 18, 2015 at 10:33 PM #1249

zainsohail19

Participant

Hello Anh,

This worked well, just some CSS issues (http://take.ms/E1oSr). I also had one more question which I asked on WordPress.org support forums for your plugin, please see if you can answer this for me (https://wordpress.org/support/topic/multiple-options-in-one-field?replies=1) ..

Thanks,
Zain

August 20, 2015 at 2:04 PM #1267

Anh Tran

Keymaster

Hi zainsohail19, glad that the code works for you. I will fix the CSS issue in the next version of Tab extension. I will also answer your question on wp.org 🙂

September 18, 2015 at 2:31 PM #1461

Anh Tran

Keymaster

Hi again,

I've just updated the Meta Box plugin on Github with an improvement for clone feature, which includes fix for the clone icon in this topic. I will release the new version after testing. If you need it works immediately, you can try the development version on Github.

Thanks!

Author

Posts

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

The topic ‘Columns and Tabs issue’ is closed to new replies.