Tabs don't work great when inside a seamless group

Open
  • Is something wrong?
#975 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
52/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
css, php
Domain
frontend, web-dev

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.

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:

  1. Make a field group with some tabs
  2. Add it to a post type or options page.

Expected behavior
Tabs to still look like tabs.

Screenshots or Video
Seamless:
Image

Standard:
Image

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?
Image

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.

Image

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?)

Dominant language
PHP
Stars
947
Forks
198
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AdvancedCustomFields/acf

All issues in AdvancedCustomFields/acf

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.