Tabs don't work great when inside a seamless group
还没有人认领这个 Issue。
评估
调研方向
在 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:
- 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?)
- 主要语言
- PHP
- 星标
- 947
- 派生
- 198
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南,环境需要你自己搭建:先看它的 README,通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
AdvancedCustomFields/acf 的其他 Issue
-
PHP 8.5: "Using null as an array offset" deprecation in ACF_Data::is() when rendering a block with empty data (local-meta.php is_request)可能已有人在做 @faisalahammad 于 2 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 68/100
AdvancedCustomFields/acf#1044 ·
-
is_preview was called incorrectly notice on every early get_field() since 6.8.10 (acf_revisions::acf_validate_post_id)可能已有人在做 @faisalahammad 于 2 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
AdvancedCustomFields/acf#1041 · 1 条评论 ·
-
True / False ACF control bug on RTL layouts可能已有人在做 @elicohenator 于 25 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 86/100
AdvancedCustomFields/acf#1038 ·
-
难度 2/5 1-3 小时 新手友好度 78/100
AdvancedCustomFields/acf#1034 · 3 条评论 ·
-
Bug: class-acf-field-icon_picker.php calls wp_get_attachment_image_url() with string Dashicon slug, causing fatal TypeError on PHP 8+可能已有人在做 @antwonw 于 36 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 86/100
AdvancedCustomFields/acf#1032 · 1 条评论 ·
查看 AdvancedCustomFields/acf 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 62/100
TYPO3BestPractices/tea#2409 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
api-platform/core#8690 ·
维护者通常 1 天内回复
-
No Code Attached Yet
难度 2/5 1-3 小时 新手友好度 72/100
joomla/joomla-cms#48626 ·
维护者通常 1 天内回复
-
enhancement good first issue
难度 2/5 1-3 小时 新手友好度 70/100
DorsetDigital/silverstripe-schema-manager#26 ·
维护者通常 1 天内回复
-
sync-en
难度 1/5 1-3 小时 新手友好度 68/100
维护者通常 4 天内回复