black friday sale

Custom Fields
Re-Envisioned
Support Meta Box Columns Adding classes and ids to rows

  • Creator
    Topic
  • #21480
    Resolved elindydotcom
    Participant

    Is there a way to add custom classes and ids to rows? Currently all rows carry the class “rwmb-row”. But I don’t see any way to add custom classes to it the same way we can do for individual fields.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #21481
    Long Nguyen
    Moderator

    Hi,

    The class rwmb-row is generated by the extension Meta Box Columns. Currently, the extension only supports to add the custom class to each column to apply the style for the column.

    For more information, please follow this documentation https://docs.metabox.io/extensions/meta-box-columns/#advanced-syntax.

    #21483
    elindydotcom
    Participant

    That’s too bad. It would be really nice to be able to add a class and/or id to style the row as well.

    #21486
    Long Nguyen
    Moderator

    Hi,

    This Javascript code will do the trick.

    jQuery(document).ready(function($) {            
        $.each($('.rwmb-row .rwmb-column'), function(index, el) {
            var _this = $(this);
            if( _this.hasClass('custom-css') ) {
                var customClass = $(this).attr('class').split(' ').pop();
                _this.parent('.rwmb-row').addClass(customClass);
            }
            
        });
    });

    You need to add the custom CSS for the column like the documentation with the format custom-css your-css-class

    'columns' => array(
        'column-1' => 4,                   // Simply define the size of the column (from 1 to 12)
        'column-2' => array(               // More advanced syntax
            'size' => 8,                   // Column size (1-12)
            'class' => 'custom-css custom-column-2', // Custom CSS class for the column
        ),
    ),

    The JavaScript code will check if the column has class custom-css and copy your-css-class to the row. See my screenshot https://share.getcloudapp.com/RBuOm0OD.

    Then you can style the row with the selector .rwmb-row.your-css-class.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.