AdvancedCustomFields / AdvancedCustomFields/acf
Tabs don't work great when inside a seamless group
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 945
- Forks
- 197
- PR merge metrics
- No merged PRs in 30d
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:
Standard:
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?)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the WordPress admin with a seamless ACF field group containing top-positioned tabs, then inspect the .acf-postbox.seamless and .acf-tab-wrap styles shown in the report. Compare seamless and standard layouts, including the stray scrollbar. Done means tabs retain visible grouping and the scrollbar is absent in both modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, php
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100