Increase width of form editor sidebar

This feature is now available within the Gravity Hopper plugin.

The form editor sidebar – used to add and configure fields – can sometimes seem a bit narrow. This will widen it.

// Increase width of form editor sidebar
add_action( 'admin_print_styles', function() {

    if ( class_exists( 'GFCommon' ) && GFCommon::is_form_editor() ) {

        echo '<style>
                .gforms_edit_form .form_editor_fields_container { max-width: calc( 100% - 744px ); }
                .gforms_edit_form .form_editor_fields_container.droppable { padding-right: 712px; }
                .folded .gforms_edit_form .form_editor_fields_container { max-width: calc( 100% - 620px ); }
                .folded .gforms_edit_form .form_editor_fields_container.droppable { padding-right: 588px; }
                .gforms_edit_form .editor-sidebar .sidebar,
                .gforms_edit_form .editor-sidebar .sidebar .sidebar__nav { width: 520px; }
                .gforms_edit_form .editor-sidebar .sidebar .add-buttons li { width: 25%; }
              </style>';

    }

} );Code language: PHP (php)

How do you find this article?