Skip to content

Fix user profile/edit SCF field table layout #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
meravi wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Fix user profile/edit SCF field table layout #362

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fac0065
Fix: user profile/edit SCF field table layout (Fixes #349)
meravi Feb 21, 2026
0ebcb86
Fix: user profile/edit SCF field table layout (Fixes #349)
meravi Feb 21, 2026
a1916cb
Merge branch 'trunk' into fix/user-profile-layout-349
meravi Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions includes/forms/form-user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ function __construct() {
// enqueue
add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
add_action( 'login_form_register', array( $this, 'login_form_register' ) );
add_action( 'admin_head', array( $this, 'scf_user_form_layout_fix' ), 20 );

Comment thread
meravi marked this conversation as resolved.
// render
add_action( 'show_user_profile', array( $this, 'render_edit' ) );
Expand Down Expand Up @@ -64,6 +65,82 @@ function admin_enqueue_scripts() {
// enqueue
acf_enqueue_scripts();
}
Comment thread
meravi marked this conversation as resolved.
/**
* Fix SCF field layout on user profile/edit screens.
*
* SCF fields on user screens render inside WordPress `table.form-table` rows,
* so we apply scoped CSS only on profile.php and user-edit.php screens.
*
* @see https://github.com/WordPress/secure-custom-fields/issues/349
*/
function scf_user_form_layout_fix()
{

// Only run in wp-admin, and only on profile/edit user screens.
if (!is_admin()) {
return;
}

$screen = function_exists('get_current_screen') ? get_current_screen() : null;
if (!$screen || !in_array($screen->base, array('profile', 'user-edit'), true)) {
Comment thread
meravi marked this conversation as resolved.
return;
Comment thread
meravi marked this conversation as resolved.
}

?>
<style id="scf-user-form-layout-fix">
/* Labels: consistent width + alignment */
body.profile-php table.form-table tr.acf-field > td.acf-label,
body.user-edit-php table.form-table tr.acf-field > td.acf-label {
width: 200px;
vertical-align: top;
padding-top: 14px;
}

/* Inputs: align to top */
body.profile-php table.form-table tr.acf-field > td.acf-input,
body.user-edit-php table.form-table tr.acf-field > td.acf-input {
vertical-align: top;
}

/* Make text inputs and textareas usable width (WP-like) */
body.profile-php table.form-table tr.acf-field > td.acf-input .acf-input-wrap input,
body.profile-php table.form-table tr.acf-field > td.acf-input textarea,
body.user-edit-php table.form-table tr.acf-field > td.acf-input .acf-input-wrap input,
body.user-edit-php table.form-table tr.acf-field > td.acf-input textarea {
width: 100%;
max-width: 25em;
}

/* Select2: keep full width, not squeezed */
body.profile-php table.form-table tr.acf-field > td.acf-input .select2-container,
body.user-edit-php table.form-table tr.acf-field > td.acf-input .select2-container {
width: 100% !important;
max-width: 25em;
}

/* Mobile: stack label + field */
@media (max-width: 782px) {
body.profile-php table.form-table tr.acf-field > td.acf-label,
body.user-edit-php table.form-table tr.acf-field > td.acf-label,
body.profile-php table.form-table tr.acf-field > td.acf-input,
body.user-edit-php table.form-table tr.acf-field > td.acf-input {
display: block;
width: auto;
}

body.profile-php table.form-table tr.acf-field > td.acf-input .acf-input-wrap input,
body.profile-php table.form-table tr.acf-field > td.acf-input textarea,
body.user-edit-php table.form-table tr.acf-field > td.acf-input .acf-input-wrap input,
body.user-edit-php table.form-table tr.acf-field > td.acf-input textarea,
body.profile-php table.form-table tr.acf-field > td.acf-input .select2-container,
body.user-edit-php table.form-table tr.acf-field > td.acf-input .select2-container {
max-width: 100%;
}
}
</style>
<?php
}



/**
Expand Down
Loading