Hello,
Thanks for the feedback!
I just ran some tests, and the issue seems to be only visible on a Woocommerce “Product” post type when using an ACF Select field with “Stylised UI” & “Multiple Selection” settings enabled. Here is the video of my test.
Note that Woocommerce enqueue its own version of Select2, called SelectWoo which override the default ACF Select2 library, which also change the way the field is displayed.
You should be able to fix the little margin you see on Product post type using the following CSS style in your admin css:
body.post-type-product .acf-field .select2-container.-acf .select2-selection--multiple .select2-search--inline{
margin-top:0;
}
As you can see on the video, ACF Extended unify the ACF Select2 display to make if identical to ACF Select display (you can see the field being displayed weirdly without ACF Extended).
However, since Woocommerce changed the way they handle the Select2 library I preferred to wait for the version to be stable to apply further CSS fix, as it seems to be changing times to times, making it hard to maintain.
I’ll check if the css fix above doesn’t break anything, and push it into the next version.
Regarding the second visual glitch you reported where the field is displayed on top of the Woocommerce header, as shown on the video, this issue can be seen with ACF + Woocommerce only (without ACF Extended).
The problem seems to be related to the following ACF native css rule:
.select2-container.-acf {
z-index: 1001;
}
I would recommend to report the issue to the ACF Support or the Woocommerce Support so they can fix it.
Hope it helps!
Have a nice day!
Regards.
