AdvancedCustomFields / AdvancedCustomFields/acf
ACF Tab align left group display issue
Open
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 945
- Forks
- 197
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
Hello, when I create groups of left-aligned tabs, there is a problem with their display. Indeed, I am unable to display the different groups of tabs.
To Reproduce
Steps to reproduce the behavior:
- Create an option page with
if( function_exists('acf_add_options_page') ) {
acf_add_options_page();
acf_add_options_sub_page('Pages génériques & pages d\'archives');
}
- Import the field group provided below
- Check the display on the option page : you won't see the first group tabs
Expected behavior
I would like to see all group tabs
Screenshots or Video
If I check the DOM generated on the option page :
I can observe the CSS selector .acf-tab-wrap.-left .acf-tab-group on the file _fields.scss at line 1946. If I uncomment this position absolute, I can see all my tabs :
Code
Here is an ACF export of the group concerned, loaded on the following option page acf_add_options_sub_page('Pages génériques & pages d\'archives');
[
{
"key": "group_637eb3741c61c",
"title": "Options \/\/ Pages génériques & pages d'archives",
"fields": [
{
"key": "field_65c1f41d2dc80",
"label": "Pages génériques",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 1
},
{
"key": "field_6386041176df9",
"label": "Page défaut",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_6386041676dfa",
"label": "Image",
"name": "hero_default",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"preview_size": "medium"
},
{
"key": "field_637eb376fb521",
"label": "Page de recherche",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_637eb38dfb522",
"label": "Image",
"name": "hero_search",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"preview_size": "medium"
},
{
"key": "field_637eb3a5fb523",
"label": "Page 404",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_637eb3c0fb524",
"label": "Image",
"name": "hero_404",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"preview_size": "medium"
},
{
"key": "field_65c1f40a2dc7f",
"label": "Pages d'archives",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 1
},
{
"key": "field_65c1f44c2dc83",
"label": "Page des expertises",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_65c1f4462dc82",
"label": "Page des formations",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_65c1f4312dc81",
"label": "Page des événements",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_65c1f46f2dc84",
"label": "Page des webinaires",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_65c1f49e2dc85",
"label": "Page des podcasts",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_65c1f4a62dc86",
"label": "Page des offres d'emploi",
"name": "",
"aria-label": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
}
],
"location": [
[
{
"param": "options_page",
"operator": "==",
"value": "acf-options-pages-generiques-pages-darchives"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"show_in_rest": 0
}
]
Version Information:
- WordPress Version 6.4.3
- PHP Version PHP 8.0
- ACF pro Version 6.2.5
- Browser : Chrome Version 121.0.6167.139 (Build officiel) (arm64)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in _fields.scss around line 1946 and reproduce the issue on the option page using the supplied field-group export and left-aligned tab groups. Confirm that all tab groups are visible, including the first group, without relying on the reported position change breaking the layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- php, scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 50/100