Ngx-bootstrap: dropdown [appendToBody]="true" not showing

[marcalj]

If I switch to [appendToBody]="true" the dropdown menu is not rendered. Neither at the end of the body. With false it's rendering ok.

[valorkin]

I would say
don't touch it for now :)
In general modal confirmed one more or less nice approach to appending
so I will reuse it in dropdowns, tooltips, etc.

[marcalj]

Great, It's a requirement for my app.
Did you look at the promised core code of Material design? They said in ngConf will release a core code for other UI projects for common functionalities.

[marcalj]

Hi @valorkin I need this, can you give advise how to implement this? I think you mention about new feature in angular2 to implement things like modals, popovers and this functionality that will change how to code it?

Can you explain me in detail so I can work on this? Thanks!

[sumigoma]

it'll use viewContainerRef as shown in the new service @valorkin's working on -> https://github.com/valor-software/ng2-bootstrap/blob/development/components/utils/components-helper.service.ts, which is the recommended way to do it now that DynamicComponentLoader has been deprecated.

[maxailloud]

Hey,

Do you know when it will be ready?
I need it to be able to have a dropdown in a table header, without it the dropdown's style is all messed up. I'm using bootstrap4 by the way.

[jtomaszewski]

Dear maintainers ;) Any ideas how do you want to implement it? It's very needed feature (actually totally required for me). I could help with that, do some PRs, but some general notes how you see it, would be nice.

[vibrant-aaronstreate]

@valorkin @jtomaszewski Did you start working on a solution for this? I really need appendToBody for a project. Is there any way I can help?

[valorkin]

Yes, we did. If lucky it will be done till Monday

[albertoramires]

@valorkin Any updates regarding this? ✨

[valorkin]

yep, we updated a lot of code, added huge of test, written more docs
converted all ngModel to reactive version
at the moment I am working on new injection service
if done today, I will updating all components with it
adding to body\datepicker popup, etc...

[ruffiem]

@valorkin the dropdown options is indeed appending to the body but then but nothing happens when clicking on the dropdown, is that true ?

[valorkin]

as a status update:
I managed to write new component loader service
it is really easy to use: https://github.com/valor-software/ng2-bootstrap/blob/development/src/popover/popover.directive.ts

So I will be updateding dropdowns to work with it
as a head us it will be container='body'

This week I want to finish with docs:
http://valorkin.github.io/ng2-bootstrap/#/

current preview version

[ruffiem]

@valorkin amazing, thanks

[stefanmeschke]

Sorry for the annoying question, but are there any release plans to support container="body" for dropdowns?

[valorkin]

Gabriel is looking into it

[AlexViderman]

Is the current dropdown-append-to-body not working? Or am I mis-understanding its purpose?

I added overflow: hidden to the parent div of the append to body example on the site and the dropdown is hiding inside the div:

[umagon]

I need this "dropdown-append-to-body" to work! Help!

[AlexViderman]

@umagon me too.. been waiting for a month, does not seem to be a priority for anyone. Angular 1 ui-bootstrap figured it out (https://angular-ui.github.io/bootstrap/#!#dropdown), waiting for whoever gets it done first for angular 2 and using that library. In the meantime I just added extra padding to my parent container if it has overflow hidden and a dropdown (as a workaround).

[ruffiem]

@umagon @AlexViderman I understand it's frustrating but I went over the dd's code. In fact, there's quite a refactoring / code rewriting to make since @valorkin will use the new component loader on the dropdown menu and it wasn't designed to. I'm sure a PR will come soon.

[AlexViderman]

@ruffiem thanks. I'll keep waiting. my work-around is good enough for now.

[ruffiem]

@AlexViderman I'll try to come up with something this week-end if @valorkin is too busy.

[valorkin]

Hey, it would be awesome. Just check how easy it could be in popover.
February is indeed a tough month, I didn't have free weekends and will not :(
But in March :)

[AlexViderman]

@ruffiem , that would be a great feature, I am sure a lot of people are waiting on it as well. even if the implementation is not ideal, it would beat the DD hiding inside a div for now.

@valorkin , totally understand, thank you for putting all the work into this library. as angular 2 grows and more people become to rely on your library for production sites, these little things become critical.

[ruffiem]

@valorkin yes, the component loader looks very good 👍 I need to find a strategy to avoid regression on keyboard nav... Any idea ?

[valorkin]

Make it composeable

[tozlakonza]

`// todo: implement after porting position

    if (this.appendToBody && this.menuEl) {

        this.domHandler.absolutePosition(this.menuEl.nativeElement, this.el.nativeElement)

    }`

with small class changes :)
move '[class.show]': 'isOpen',
'[class.open]': 'isOpen',
'[class.active]': 'isOpen'
to dropdown-menu.directive if appendToBody

[valorkin]

Testing and will roll-out new version of dropdown next week https://github.com/valor-software/ng2-bootstrap/pull/1771

[touqeershafi]

update please! When this will be available in stable release ?

[valorkin]

I will be wrapping up this today and publishing

[touqeershafi]

is this available for use ?