Clever Geek Handbook

Angular 2 Bootstrap dropdown (ngx-bootstrap / ng2-bootstrap) not working

It looks like I am getting Angular Bootstrap dropdowns to work in one part of my application. I'm not sure why it works there and not elsewhere. In my module, I import with the BsDropdownModule.forRoot()

same as where it works. I've tried embedding in HTML from several of my examples ... Nothing. I know I've worked there before and don't remember changing anything related to this.

I am not getting any errors, and I am not entirely sure how to proceed with troubleshooting this issue. I noticed a problem with ng2-bootstrap, so I upgraded to ngx-bootstrap. Same problem.

+3


source to share


4 answers


I figured out the question. The dropdown panels did work. The problem was that for some reason the y (top) position for .dropdownMenu was putting it outside of the container it was in, where it is not visible. I'm still not sure why this is happening, but at least I have something to work with.



+1


source


Make sure your Angular and Bootstrap versions are compatible. This happened when I was using Angular 4 with ng2-bootstrap 1.6.x. Better yet, you should use ngx-bootstrap instead of ng2-bootstrap. To get the dropdown, add a container attribute:



<div class="btn-group" dropdown  container="body"></div>
+3


source


I was able to get this working with bootstrap@4.0.0-alpha.5 , but when I switched to 4.0.0-alpha.6 I couldn't get the dropdown to work. Not sure what went wrong, but I had to add the BsDropdownModule to the context by adding to my providers (I already had BsDropdownModule.forRoot ()) .... (not really sure about the details of what I broke at the end).

BUT found that adding the BsDropdownModule to the module where I was calling the menu then it worked.

+1


source


You need to add BsDropdownModule.forRoot () to the AppModule imports and the BsDropdownModule (not .forRoot ()!) To the submodule that uses bootstrap dropdown menus.

0


source






More articles:


All Articles