ACF Tab align left group display issue

[ltrihan]

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:

1. 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');
   }

2. Import the field group provided below
3. 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)

[ltrihan]

As a quickfix I will prefer the approach to create 2 fields groups loaded on the same page :