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

Dropup does not work in IE11 / BS4 #3054

Closed
brgaulin opened this issue Nov 16, 2017 · 1 comment · Fixed by #3057
Closed

Dropup does not work in IE11 / BS4 #3054

brgaulin opened this issue Nov 16, 2017 · 1 comment · Fixed by #3057

Comments

@brgaulin
Copy link
Contributor

Bug description or feature request:

Dropdowns in the up direction only work once in IE11. If you click a second time, they go in the down direction. (but still add the dropup class to the parent)

Plunker/StackBlitz that reproduces the issue:

The demo is affected: https://valor-software.com/ngx-bootstrap/#/dropdowns#dropup

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: Tried 1.9.3 & 2.0.0-beta.8
Angular: 4.2.4
Bootstrap: 4.0.0-beta2(latest)

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI

@brgaulin brgaulin changed the title Dropup does not work currently in IE11 Dropup does not work in IE11 / BS4 Nov 16, 2017
@brgaulin
Copy link
Contributor Author

@IlyaSurmay was curious if you remember this one:

The error appears to be in this checkDropup() method: https://github.com/valor-software/ngx-bootstrap/blob/development/src/dropdown/bs-dropdown.directive.ts#L321

In chrome/firefox, const top on the second opening returns 0px, but in IE it returns auto. In chrome the dom when debugged has inline styles like left: 0px; right: auto; top: auto; transform: translateY(-101%); background-color: rgb(56, 123, 182); which have that top:auto. Not sure what that detection is for, but it appears wonky in IE11.

In IE11 getComputedStyle returns 'auto' since it is on the inline style.

I'll send a PR for discussion in a second, but it appears that if I remove that top auto check, it functions as a drop up perfectly fine. Dropdowns too

brgaulin added a commit to brgaulin/ngx-bootstrap that referenced this issue Nov 16, 2017
Fixes valor-software#3054

I am unsure of what this top: auto checking was for, but in IE11 it was very angry. And the inline style on the element is top: auto, so this might be a hard way to check this edge case.
brgaulin added a commit to brgaulin/ngx-bootstrap that referenced this issue Nov 16, 2017
The inline style on the element is top: auto, this fix is for cross browser support.

Fixes valor-software#3054
valorkin pushed a commit that referenced this issue Nov 23, 2017
The inline style on the element is top: auto, this fix is for cross browser support.

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

Successfully merging a pull request may close this issue.

2 participants