Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ACF Tab align left group display issue #894

Open
ltrihan opened this issue Feb 6, 2024 · 1 comment
Open

ACF Tab align left group display issue #894

ltrihan opened this issue Feb 6, 2024 · 1 comment

Comments

@ltrihan
Copy link

ltrihan commented Feb 6, 2024

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');
}
  1. Import the field group provided below
  2. 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
image

If I check the DOM generated on the option page :
image

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 :
image

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
Copy link
Author

ltrihan commented Feb 6, 2024

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant