Increase width of form editor sidebar

uamv

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

Note: This feature is now available within the Gravity Hopper plugin.

/* Increase width of form editor sidebar */
.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%;
}

// 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>';

    }

} );