woocommerce
selectWoo / select2 dropdown positioned incorrectly when html has margin-top
Prerequisites (mark completed items with an [x]):
- [x] I have have carried out troubleshooting steps and I believe I have found a bug.
- [x] I have searched for similar bugs in both open and closed issues and cannot find a duplicate.
Describe the bug When the admin-bar is displayed on the front-end of WordPress, the html element has margin-top, and the select2 dropdown is positioned incorrectly.
I think this is caused by the use of the jQuery function .offset() which does not include the html element's margin. This is noted in the jQuery documentation: https://api.jquery.com/offset/
jQuery does not support getting the offset coordinates of hidden elements or accounting for margins set on the
<html>document element.
Expected behavior I expect to see the current selection above the dropdown while the dropdown is open.
Actual behavior The current selection is covered by the dropdown only when the WordPress admin-bar is shown.
Steps to reproduce the bug (We need to be able to reproduce the bug in order to fix it.) Steps to reproduce the bug:
- Log in to WordPress / WooCommerce
- Try to add an address, either in Checkout or My Account.
Screenshots
Logged In
Logged Out
Isolating the problem (mark completed items with an [x]):
- [x] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
- [x] This bug happens with a default WordPress theme active, or Storefront.
- [x] I can reproduce this bug consistently using the steps above.
Fixes I've Tried
I fixed this in my own theme styles by adding margin-top to .select2-dropdown that corresponds to the admin-bar height.
body.admin-bar .select2-dropdown {
margin-top: 32px;
}
@media( max-width: 782px ) {
body.admin-bar .select2-dropdown {
margin-top: 46px;
}
}
We are also running into this and it broke our selectWoo usage as well. Seems new in a recent update: either WooCommerce or Wordpress 5.7, but I haven't confirmed exact one; just know that it broke recently.
This was addressed in https://github.com/woocommerce/woocommerce/pull/29397 but not here in the selectWoo repo
I have come across the same issue on some pages in WordPress v6.0.1 and WooCommerce 6.8.0. There is no longer "admin-bar" class added to BODY when the admin bar appears, so the above styles don't help! select2.full.js?ver=4.0.3-wc.6.8.0 does NOT contain the attachBody fixes from https://github.com/woocommerce/selectWoo/pull/49/files Applying these 2 changes fixes the issue.
