Ngx-bootstrap: dropdown dropup option appears well above where it should be

[kernwig]

Bug description or feature request:

Starting with v1.9.0 (also tested with v1.9.3), with a dropdown with dropup=true. Ex:
<div dropdown container="body" [dropup]="'true'">

The dropdown content appears well above where it should be, relative to the content box's size. For instance, if the dropdown content is 100px high, the _bottom_ of that div appears 100px above its <input> box.

The position is correct in v1.8.1 and earlier.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 1.9.3

Angular: 4.4.5

Bootstrap: 3.3.7

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

Angular CLI.

[IlyaSurmay]

Works fine here https://valor-software.com/ngx-bootstrap/#/dropdowns#dropup
Please provide plunkr/stackblitz with reproduction
You can use one of starter templates:
Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview
StackBlitz: https://stackblitz.com/edit/ngx-bootstrap-stack?file=app%2Fapp.module.ts

[kernwig]

Problem continues with Angular 5.0.0 and ngx-bootstrap 2.0.0-beta.7.

The plickr template doesn't run, emitting "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT" to the console.

The stackblitz link is broken.

[kernwig]

I stripped down my component to create a demo.
https://github.com/kernwig/ngxb-dropup

[valorkin]

Issue is in binding [dropup]="'true'" and should be
[dropup]="true",
Illya please check repo above if you can reproduce,please reopen issue

[kernwig]

That was a mistake in my typing in of an example of the bug report. The repo example I provided correctly passes in a boolean value and demonstrates the bug.

[kernwig]

Please reopen. This is a major regression.

[valorkin]

Can't reproduce with latest version https://valor-software.com/ngx-bootstrap/#/dropdowns

[valorkin]

If you can reproduce with latest version, we will reopen and mark as urgent

[kernwig]

I provided a demo. https://github.com/kernwig/ngxb-dropup

Just because it works in one bare minimum use case doesn't mean there isn't a regression.

[valorkin]

Usually it means some mess up with css

[kernwig]

I removed the tiny amount of css that I had, updated to the latest beta, and deployed the demo live.

Repo: https://github.com/kernwig/ngxb-dropup
Live: http://fanello.net/ngxb-dropdown/index.html

[valorkin]

Awesome, this is most helpful

[zakki]

Bs4 support in bs-dropdown-container.component.ts seems to break bs3.

https://github.com/zakki/ngx-bootstrap/commit/bdd7b99b606f943abb367fe9d8cc75c028fab3f5

[1-0-1]

Seeing same issue.

[valorkin]

seems translateY should be added only for bs4
will be fixed shortly

[michaelfaisst]

I have the same issue but with the following versions:
Angular: 5.0.2
Bootstrap : 4.0.0-alpha.6
ngx-bootstrap: 2.0.0-beta.11

This was no issue in 2.0.0-beta.2 by the way.

[valorkin]

Css is a mess

[luisfpg]

I've got the same issue using Angular 6.1.1 and ngx-bootstrap 3.0.1 with Bootstrap 4.
Here's a screenshot:

And here's the template code:

<div style="margin-top: 30rem" class="p-5" >
  <div dropdown [dropup]="true">
    <button dropdownToggle type="button" class="btn btn-primary dropup-toggle">
      Button dropdown <span class="caret"></span>
    </button>
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>
</div>

There's no custom style at all.

Please, reopen the issue.

[luisfpg]

BTW, if I add the following style, it works again:

.dropdown-menu {
  transform: none !important;
}

I see this previous comment:

seems translateY should be added only for bs4
will be fixed shortly

Well, it seems translateY should never be added at all!

[hisham]

+1. I also ran into this issue with bs4 and latest ngx-bootstrap. Had to add that transform: none to the css.

[vvolodin]

+1. Having this issue in 2020, on [email protected]. Adding transform: none !important; helps!