Many display problems with Select2 4.0.1 #3970

michaelperrin · 2015-11-29T16:33:15Z

Hello,

Since version 4.0.1 (no problem with version 4.0.1-rc1), even the simplest examples are not displayed correctly on all browsers (latest Chrome / Firefox / Safari at least): the dropdown is not displayed under the selector.

Here is an example: https://jsfiddle.net/michaelperrin/zxu8pxn3/1/ (clicking on the selector shows the dropdown, but it is displayed too much on the left).

kevin-brown · 2015-11-29T18:59:20Z

This appears to be a bug when there is a margin set on the body and the position has not been overridden.

So this is definitely related to c9216b4, because it only affects statically positioned elements.

jonahgreenthal · 2015-11-29T22:24:26Z

I had a possibly similar issue in which the dropdown portion appeared slightly lower and to the right of where it should have been. Do you think this is related? If so, what additional information, if any, would be helpful?

For the time being I just papered it over by tweaking the positioning in my custom CSS overrides, but obviously I'd prefer a better solution.

kevin-brown · 2015-11-30T01:53:41Z

For anyone running into this issue, it would be useful to have the output for the following two statements (executed in your browser console, F12 usually):

document.body.style.position

and

$(document.body).offset()

On the documentation website, I get the following output

Which explains why the dropdown is lining up fine there. This will allow me to confirm that the issue is actually with the offset caused by margins on the body (or the dropdown parent).

jonahgreenthal · 2015-11-30T04:33:11Z

I misremembered -- it's slightly above and left of where it should be. Anyway, here's the console output from those commands:

> document.body.style.position
< ""
> $(document.body).offset()
< Object { top=8,  left=8}

svivian · 2015-11-30T15:35:52Z

I'm getting the same issue. Here's the output:

> document.body.style.position
  ""
> $(document.body).offset()
  Object {top: 20, left: 20}

BlaM · 2015-12-01T15:01:15Z

Same problem here...

> document.body.style.position
< ""
> $(document.body).offset()
< Object {top: 65, left: 0}

And yes, it's positioned 65px too high, "left" position is correct. The control looks correct if I remove the page margin - but then the page looks broken.

If I wrap it like this:

<body>
<div style="margin-top: 65px">
<select ..... >

The problem still appears - even if the page itself does not have a margin.

This works, though:

<div style="padding-top: 65px">

eric-poitras · 2015-12-01T19:07:38Z

Same problem:

$(document.body).offset()
Object {top: 54, left: 0}

vincentwoo · 2015-12-02T22:20:17Z

For me, 4.0.1 opens the dropdown and immediately closes it whenever I click on the select. Reverting to 4.0.0 fixes the problem.

kevin-brown · 2015-12-03T00:33:35Z

For me, 4.0.1 opens the dropdown and immediately closes it whenever I click on the select. Reverting to 4.0.0 fixes the problem.

This is probably a separate, unrelated issue. If you can create a jsbin/jsfiddle that reproduces the issue and a new ticket describing the issue, we can handle the bug.

vincentwoo · 2015-12-03T04:33:25Z

It seems like the same issue. Also seems to be caused by CSS problems. Here's a fiddle: https://jsfiddle.net/hacf7fdy/1/

Click on the select without holding down the mouse and it will immediately close again (Chrome 46, no idea if it happens on other browsers).

BlaM · 2015-12-03T08:35:35Z

It's the same issue. Had the same thing here and it's caused by having one of the list items at the location of the mouse as soon as the drop down opens and when you "mouseup" select2 thinks the item has been selected and closes.

kevin-brown · 2015-12-03T16:36:48Z

It seems like the same issue.

Ah, you're right. I forgot how we handle events in the dropdown.

The dropdown is getting placed beneath the mouse, and the mouseup event is being fired on it so it is closing. (Which is what @BlaM just said)

LordSputnik · 2015-12-05T19:56:39Z

Same here - noticed this because of an item being selected when the dropdown opens, as other people seem to have found.

> document.body.style.position
< ""
> $(document.body).offset()
< Object {top: 64, left: 0}

Salubritas · 2015-12-23T14:34:13Z

Same here. Dropdown is appearing too high.

document.body.style.position
""
$(document.body).offset()
Object { top: 10, left: 0 }

This fixes an issue with non-static parents (ones that were relatively or absolutely positioned) where the dropdown would be offset by the offset of the parent, so it would almost never line up. This fixes the problem by removing the offset when the parent is not statically positioned, which is what we used to do in older versions of Select2. This closes #3303. This closes #3614. This closes #3672.

This adds a regression test that verifies the problem with positioning the dropdown when the parent is a statically positioned element that still has an offset. This could typically be seen if the body element has an offset, which unfortunately it almost always does because of the default user stylesheet in browsers. This was not caught during pre-release testing because all of the test pages reset the margins and padding on the body element. This regression test verifies that the offsets that should be set for the dropdown are calculated correctly. These were surprisingly difficult to do because of how the offset is calculated using different positioning techniques. These tests are for #3970

ramitayba · 2016-01-03T06:07:07Z

same issue appear with fixed header template

kevin-brown · 2016-01-03T17:19:57Z

Note that this issue should be fixed with the latest master if you manually recompile the assets. It will be included in the upcoming 4.0.2-rc.1 release.

This adds a regression test that verifies the problem with positioning the dropdown when the parent is a statically positioned element that still has an offset. This could typically be seen if the body element has an offset, which unfortunately it almost always does because of the default user stylesheet in browsers. This was not caught during pre-release testing because all of the test pages reset the margins and padding on the body element. This regression test verifies that the offsets that should be set for the dropdown are calculated correctly. These were surprisingly difficult to do because of how the offset is calculated using different positioning techniques. These tests are for select2#3970

There was a commit that landed in 4.0.1 that fixed positioning for non-static elements, which are commonly used for the custom `dropdownParent` option, but broke positioning for statically positioned elements, commonly used in almost every other case. That commit was select2@c9216b4 This fixes the positioning issues caused by that commit by properly calculating the offsets for statically positioned parents. Statically positioned parents are unique, because the offset for the dropdown must be calculated based on the closest element that is non-statically positioned. Otherwise, the offset for any statically positioned parent other than the body will be considerably higher than it should be, resulting in the dropdown being offset by a large amount. The offset parent for the body element is the html element, which is why this works for both the body element and any custom parents for the dropdown. This would not be needed if the parent wasn't customizable (as seen in Select2 3.x) because you will never need to offset the body element if it is statically positioned, because the html element almost never has an offset. This also fixes JSHint issues within the tests added in the last commit. This closes select2#3970 This closes select2#3639

kevin-brown added confirmed bug 4.x labels Nov 29, 2015

kevin-brown added this to the 4.0.2 milestone Nov 29, 2015

LordSputnik added a commit to metabrainz/bookbrainz-site that referenced this issue Dec 5, 2015

Rollback to select2 4.0.0, due to select2/select2#3970

e4d4d77

kevin-brown mentioned this issue Dec 19, 2015

Position issues with bootstrap parent #4022

Closed

JacobEvelyn mentioned this issue Dec 28, 2015

Possible not to memoize top offset? panorama-ed/maximize-select2-height#5

Closed

kevin-brown closed this as completed in e260860 Jan 1, 2016

livem mentioned this issue Jan 4, 2016

The dropdown displace problem #4058

Closed

This was referenced Jan 26, 2016

Gap appearing between options and selected options list #4106

Closed

Dropdown position issue (with simple live demo) #4129

Closed

jzabroski mentioned this issue May 27, 2016

Documentation for how to report dropdown positioning issues #4387

Closed

renovate bot mentioned this issue Nov 22, 2019

Update dependency select2 to v4 hedeliusk/opensphere#32

Open

1 task

renovate bot mentioned this issue Feb 9, 2021

Update dependency select2 to v4 (master) hedgedoc/hedgedoc#876

Closed

1 task

renovate bot mentioned this issue May 17, 2021

chore(deps): update dependency select2 to v4 (master) hedgedoc/hedgedoc#1302

Closed

1 task

mend-for-github-com bot mentioned this issue Jun 10, 2021

Update dependency select2 to v4 - autoclosed shaimael/keycloak#1220

Closed

1 task

mend-for-github-com bot mentioned this issue Nov 1, 2021

Update dependency select2 to v4 ioana-nicolae/keycloak#205

Open

1 task

renovate bot mentioned this issue Jan 23, 2022

chore(deps): update dependency select2 to v4 (master) hedgedoc/hedgedoc#2016

Closed

1 task

renovate bot mentioned this issue Jan 21, 2023

chore(deps): update dependency select2 to v4 (master) hedgedoc/hedgedoc#3191

Closed

1 task

renovate bot mentioned this issue Mar 22, 2023

Update dependency select2 to v4 [SECURITY] - autoclosed mcaj-git/nextcloud-dev#301

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Many display problems with Select2 4.0.1 #3970

Many display problems with Select2 4.0.1 #3970

michaelperrin commented Nov 29, 2015

kevin-brown commented Nov 29, 2015

jonahgreenthal commented Nov 29, 2015

kevin-brown commented Nov 30, 2015

jonahgreenthal commented Nov 30, 2015

svivian commented Nov 30, 2015

BlaM commented Dec 1, 2015

eric-poitras commented Dec 1, 2015

vincentwoo commented Dec 2, 2015

kevin-brown commented Dec 3, 2015

vincentwoo commented Dec 3, 2015

BlaM commented Dec 3, 2015

kevin-brown commented Dec 3, 2015

LordSputnik commented Dec 5, 2015

Salubritas commented Dec 23, 2015

ramitayba commented Jan 3, 2016

kevin-brown commented Jan 3, 2016

Many display problems with Select2 4.0.1 #3970

Many display problems with Select2 4.0.1 #3970

Comments

michaelperrin commented Nov 29, 2015

kevin-brown commented Nov 29, 2015

jonahgreenthal commented Nov 29, 2015

kevin-brown commented Nov 30, 2015

jonahgreenthal commented Nov 30, 2015

svivian commented Nov 30, 2015

BlaM commented Dec 1, 2015

eric-poitras commented Dec 1, 2015

vincentwoo commented Dec 2, 2015

kevin-brown commented Dec 3, 2015

vincentwoo commented Dec 3, 2015

BlaM commented Dec 3, 2015

kevin-brown commented Dec 3, 2015

LordSputnik commented Dec 5, 2015

Salubritas commented Dec 23, 2015

ramitayba commented Jan 3, 2016

kevin-brown commented Jan 3, 2016