-
Notifications
You must be signed in to change notification settings - Fork 195
Open
Description
Describe the bug
Tabs don't look like tabs when they're used in a seamless group.
To Reproduce
Steps to reproduce the behavior:
- Make a field group with some tabs
- Add it to a post type or options page.
Expected behavior
Tabs to still look like tabs.
Screenshots or Video
Seamless:

Code
This is not very easy to solve with the markup how it is, but you get most of the way there stripping out the seamless-specific code related to tab groups and adding something like this:
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field {
border-inline: 1px solid #c3c4c7;
}
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field-tab + .acf-field {
border-top: 1px solid #c3c4c7;
}
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field:has(+ .acf-field-tab),
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field:has(+ :not(.acf-field)),
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field:last-child {
border-bottom: 1px solid #c3c4c7;
}The tabs still have borders at the bottom, though I'm sure you could pull whatever fixes that out of the non-seamless styles?

Sample Code to Generate an Options Page
acf_add_options_sub_page(
array(
'page_title' => __('Sample ACF Options Page', 'sample-acf-code'),
'menu_title' => __('Sample Options Page', 'sample-acf-code'),
'menu_slug' => 'sample-acf-code-options-page',
'capability' => 'manage_options',
'redirect' => false
)
);
acf_add_local_field_group(
array(
'key' => 'group_sample_items_settings',
'title' => __('API Settings', 'sample-acf-code'),
'fields' => array(
array(
'key' => 'field_api_credentials_tab',
'label' => __('API Credentials', 'sample-acf-code'),
'name' => '',
'type' => 'tab',
'placement' => 'top'
),
array(
'key' => 'field_sample_email',
'label' => __('Email', 'sample-acf-code'),
'name' => 'sample_email',
'type' => 'email',
'instructions' => __('Your login email address', 'sample-acf-code'),
'required' => 1
),
array(
'key' => 'field_sample_password',
'label' => __('Password', 'sample-acf-code'),
'name' => 'sample_password',
'type' => 'password',
'instructions' => __('Your login password', 'sample-acf-code'),
'required' => 1
),
array(
'key' => 'field_sample_account_id',
'label' => __('Account ID', 'sample-acf-code'),
'name' => 'sample_account_id',
'type' => 'text',
'instructions' => __('Your Account ID', 'sample-acf-code'),
'required' => 1
),
array(
'key' => 'field_sample_api_key',
'label' => __('API Key', 'sample-acf-code'),
'name' => 'sample_api_key',
'type' => 'password',
'instructions' => __('API Key for authentication (different from App Secret)', 'sample-acf-code'),
'required' => 1
),
array(
'key' => 'field_import_settings_tab',
'label' => __('Import Options', 'sample-acf-code'),
'name' => '',
'type' => 'tab',
'placement' => 'top'
),
array(
'key' => 'field_import_frequency',
'label' => __('Import Frequency', 'sample-acf-code'),
'name' => 'import_frequency',
'type' => 'select',
'choices' => array(
'daily' => __('Daily', 'sample-acf-code'),
'twicedaily' => __('Twice Daily', 'sample-acf-code'),
'hourly' => __('Hourly', 'sample-acf-code')
),
'default_value' => '',
'allow_null' => 1,
'instructions' => __('Frequency that new items are imported', 'sample-acf-code')
),
array(
'key' => 'field_max_items_per_import',
'label' => __('Max Items Per Import', 'sample-acf-code'),
'name' => 'max_items_per_import',
'type' => 'number',
'default_value' => '',
'instructions' => __('Maximum number of items to import in a single batch. Leave empty to import all available new items. Useful for testing or troubleshooting.', 'sample-acf-code')
),
array(
'key' => 'field_force_full_import',
'label' => __('Force Full Import', 'sample-acf-code'),
'name' => 'force_full_import',
'type' => 'true_false',
'default_value' => 1,
'ui_on_text' => 'On',
'ui_off_text' => 'Off',
'instructions' => __('Enable this to force a full import instead of incremental. Turn off after running once.', 'sample-acf-code')
),
array(
'key' => 'field_notification_email',
'label' => __('Notification Email', 'sample-acf-code'),
'name' => 'notification_email',
'type' => 'email',
'instructions' => __('Email address to notify when unmatched loan officers are found during import.', 'sample-acf-code'),
'value' => get_option('admin_email')
),
array(
'key' => 'field_manual_import_section',
'label' => __('Manual Import', 'sample-acf-code'),
'name' => 'manual_import_info',
'type' => 'message',
'message' => $this->get_import_controls_html(),
'new_lines' => 'br'
),
array(
'key' => 'field_connection_status_tab',
'label' => __('Connection Status', 'sample-acf-code'),
'name' => '',
'type' => 'tab',
'placement' => 'top'
),
array(
'key' => 'field_connection_status',
'label' => __('API Connection Status', 'sample-acf-code'),
'name' => 'connection_status',
'type' => 'message',
'message' => $this->get_connection_status_html(),
'new_lines' => 'br'
),
),
'location' => array(
array(
array(
'param' => 'options_page',
'operator' => '==',
'value' => 'sample-acf-code-options-page'
)
)
),
'menu_order' => 99,
'position' => 'normal',
'style' => 'seamless'
)
);Version Information:
- WordPress Version: 6.8.2
- PHP Version: 8.2.29
- ACF Version: Pro 6.5.0.1
- Browser: Chrome 138
Additional context
There is also a stray scroll bar in both seamless and not-seamless mode.
This is easily solved by adding overflow: clip here:
.acf-tab-wrap {
overflow: auto;
overflow: clip;
}(It's probably worth keeping overflow: auto for older browsers?)
Metadata
Metadata
Assignees
Labels
No labels
