Columns and Tabs issue

Support MB Columns Columns and Tabs issue

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1183
    zainsohail19zainsohail19
    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

    #1199
    Anh TranAnh Tran
    Keymaster

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

    #1243
    zainsohail19zainsohail19
    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' );
    
    #1244
    zainsohail19zainsohail19
    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' );
    #1245
    Anh TranAnh 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

    #1249
    zainsohail19zainsohail19
    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

    #1267
    Anh TranAnh 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 🙂

    #1461
    Anh TranAnh 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!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Columns and Tabs issue’ is closed to new replies.