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.

Sign up for GitHub

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

Jump to bottom

selectWoo / select2 dropdown positioned incorrectly when html has margin-top #41

Open
5 tasks done
douglas-johnson opened this issue Mar 3, 2021 · 3 comments
Open
5 tasks done

selectWoo / select2 dropdown positioned incorrectly when html has margin-top #41

douglas-johnson opened this issue Mar 3, 2021 · 3 comments

Comments

@douglas-johnson
Copy link

douglas-johnson commented Mar 3, 2021 •
edited
Loading

Prerequisites (mark completed items with an [x]):

  • I have have carried out troubleshooting steps and I believe I have found a bug.
  • 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:

  1. Log in to WordPress / WooCommerce
  2. Try to add an address, either in Checkout or My Account.

Screenshots

Logged In

Screen Shot 2021-03-03 at 12 16 16 PM

Logged Out

Screen Shot 2021-03-03 at 12 16 57 PM

Isolating the problem (mark completed items with an [x]):

  • I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
  • This bug happens with a default WordPress theme active, or Storefront.
  • 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;
  }
}
@broksonic21
Copy link

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.

@douglas-johnson
Copy link
Author

This was addressed in woocommerce/woocommerce#29397 but not here in the selectWoo repo

@PhilMakower
Copy link

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.

This was referenced Aug 12, 2022
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@douglas-johnson @broksonic21 @PhilMakower