Skip to content

Tabs don't work great when inside a seamless group #975

@cbirdsong

Description

@cbirdsong

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions