Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Tabs don't work great when inside a seamless group

オープン
  • 何か問題がありますか？
#975 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
52/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
css, php
領域
frontend, web-dev

調査の方向性

上部に配置されたタブを含むシームレスな ACF フィールドグループを使って WordPress 管理画面で問題を再現し、その後、報告に示されている .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
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

AdvancedCustomFields/acf のほかの issue

AdvancedCustomFields/acf の issue をすべて見る

似ている issue

PHP の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。