Adding classes and ids to rows

Support MB Columns Adding classes and ids to rowsResolved

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #21480
    maybeadevmaybeadev
    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.

    #21481
    Long NguyenLong Nguyen
    Moderator

    Hi,

    The class rwmb-row is generated by the extension MB 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
    maybeadevmaybeadev
    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 NguyenLong 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 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.