Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Tabs don't work great when inside a seamless group

未关闭
#975 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
52/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
css, php
领域
frontend, web-dev

调研方向

在 WordPress 管理后台中,使用包含顶部标签页的无缝 ACF 字段组重现该问题,然后检查报告中显示的 .acf-postbox.seamless 和 .acf-tab-wrap 样式。比较无缝布局和标准布局,包括多余的滚动条。完成标准是:在两种模式下,标签页都保留清晰可见的分组,并且不显示滚动条。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
PHP
星标
947
派生
198
PR 合并指标
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南,环境需要你自己搭建:先看它的 README,通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

AdvancedCustomFields/acf 的其他 Issue

查看 AdvancedCustomFields/acf 的全部 Issue

相似的 Issue

更多 PHP Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。