Track tasks and feature requests
Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Reeds Drag drop lists with Angular Bootstrap 4 bootstrap4 Bootstrap 4 Login Form skelly ProductHunt style user image hover snippets Bootstrap 4 credit card payment form bootstrap4 Bootstrap 4 Navbar Always Collapsed (beta) tomcat CSS colorize filters snippets Amazing sketchJs animation demo mayberry Bootstrap 4 overlay card skelly Vue Chart Live Data - switch tomcat Basis Template for.
Join 40 million developers who use GitHub issues to help identify, assign, and keep track of the features and bug fixes your projects need.
Sign up for free See pricing for teams and enterprises Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
![Angular bootstrap collapse navbar on click Angular bootstrap collapse navbar on click](/uploads/1/2/5/5/125542217/644393414.jpg)
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
Comments
commented Nov 18, 2017 • edited
edited
I just updated to the latest version of mdbootstrap and expected this to be fixed. Viewing on mobile, clicking a link within a navbar or clicking outside of navbar does not close said navbar. Is it just me or is this still a standing issue? Repro: 1.) 2.) View on mobile. P.S - This does not work on your Angular docs either. Thanks, Brad |
commented Nov 19, 2017
We are working on a fix. Thanks for reporting. |
commented Nov 20, 2017
My solution for this was two part. To watch if the user clicks off of the menu, I watched for click events like so I had to add in a variable this.nav.burger to /src/navbars/navbar.component.ts that monitors true/false if the menu is presented collapsed or full and then get a reference to that navbar.Then lastly, I created a directive for links. Actual navbar markup. There's probably a much better way to do this, but this seems to work for me for the time being. |
commented Jan 2, 2018
Hello guys, We have uploaded fix for this case to our dev branch. You can download it without problems. In next few days we'll put bunch of fixes to our master branch. This update will include fix for nav too. Best Regards, Damian |
closed this Jan 2, 2018
commented Jan 27, 2018
Thanks for the fix @Bloodcast69, but After clicking a Dropdown item the nav bar still doesn't collapse |
commented Jan 28, 2018
@Tooluloope could you please temporarily remove mdbRippleRadius directive from dropdown component to check if that helps? |
commented Mar 3, 2018
Any update on this? My navbar still won't collapse once clicked on an item. |
commented Mar 5, 2018
dec23rd1986 - which problem did you encounter? Navbar doesn't close after clicking in mobile view? If yes, please add routerLink='/' to every element. Please give me more information. Best Regards, Damian |
commented Mar 6, 2018
Hi there, I added the routerLink code and it's still not working. I pasted my code here for reference. |
commented Mar 7, 2018 • edited
edited
Dear @dec23rd1986 please add routerLink to a's elements instead of li's. That should work now. If not, please check if you have configured routes correctly. Best Regards, Damian |
commented Mar 7, 2018
I switched routerlink to the tag rather than |
commented Mar 8, 2018
Wait a moment... Are you using code from jQuery instead of Angular one? It's looks like jQuery. Please use navbar code for Angular: https://mdbootstrap.com/angular/components/navbars/ , and add routerLink='/' to every a element. Best Regards, Damian |
reopened this Mar 8, 2018
commented Mar 22, 2018
What worked for me was to add the dropdownToggle directive to each of the link tags. One of mine looks like this: <a mdbRippleRadius (click)='logout()' href='#' dropdownToggle>Logout</a> |
commented Mar 22, 2018
I still can't make it work. What is strange is how when I click the toggle button, it opens up out of the page rather than down. |
commented Mar 23, 2018
Dear @dec23rd1986 we're providing dropup variation of dropdown. Instead of dropping down elements, it's dropping up. Maybe you're using this type of dropdown? |
commented Mar 24, 2018
Hi @Bloodcast69, I think I'm missing a few things here:
I hope this makes sense. Thanks! |
commented Mar 26, 2018
Dear @dec23rd1986 1st question: There you can find every information that you need to use our dropdowns: https://mdbootstrap.com/angular/components/dropdowns/#introduction 2nd question: If you're thinking about closing navbar hamburger after clicking on some items when mobile, you have to add routerLink with some specific address (for example, for your home link, routerLink='/home'. But if you're not thinking about navbar, but dropdowns, there's already implemented a solution, to close one dropdown after clicking on another one. Hope that my answer is clear to you. If not, feel free to ask me more. Best Regards, Damian |
commented May 1, 2018 • edited
edited
None of the solutions listed here work for me. Is there a tutorial from scratch out there? There are soooo many things that could have gone wrong here. |
commented May 2, 2018 • edited
edited
@daveparks23 I never found a solution via mdbootstrap, however through much digging I found out that this is a common issue. Someone via stack overflow came up with a solution that has worked wonders for me. You can read about it here: https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click/42401686#42401686 I included this code in my jQuery section at the end of my index page: <script> $('.navbar-nav>li>a').on('click', function(){ $('.navbar-collapse').collapse('hide'); });</script> Hope that works for you! -Andrea |
commented May 3, 2018
Thank you so much! |
closed this May 3, 2018
commented May 5, 2018 • edited
edited
New! html: use: <li [routerLinkActive]='['link-active']' (click)='onMenuClick()'> ts: import { Component, ElementRef, Renderer } from '@angular/core'; import { Directive } from '@angular/core/src/metadata/directives'; @component({ selector: 'nav-menu', templateUrl: './navmenu.component.html', styleUrls: ['./navmenu.component.css'], }) export class NavMenuComponent { constructor(private el: ElementRef, private renderer: Renderer) { } } |
commented May 11, 2019
This worked for me: app.component.html app.component.ts Hope it helps :) |
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment
Track tasks and feature requests
Join 40 million developers who use GitHub issues to help identify, assign, and keep track of the features and bug fixes your projects need.
Sign up for free See pricing for teams and enterprises 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
Comments
commented Nov 18, 2017 • edited
edited
I just updated to the latest version of mdbootstrap and expected this to be fixed. Viewing on mobile, clicking a link within a navbar or clicking outside of navbar does not close said navbar. Is it just me or is this still a standing issue? Repro: 1.) 2.) View on mobile. P.S - This does not work on your Angular docs either. Thanks, Brad |
commented Nov 19, 2017
We are working on a fix. Thanks for reporting. |
commented Nov 20, 2017
My solution for this was two part. To watch if the user clicks off of the menu, I watched for click events like so I had to add in a variable this.nav.burger to /src/navbars/navbar.component.ts that monitors true/false if the menu is presented collapsed or full and then get a reference to that navbar.Then lastly, I created a directive for links. Actual navbar markup. There's probably a much better way to do this, but this seems to work for me for the time being. |
commented Jan 2, 2018
Hello guys, We have uploaded fix for this case to our dev branch. You can download it without problems. In next few days we'll put bunch of fixes to our master branch. This update will include fix for nav too. Best Regards, Damian |
closed this Jan 2, 2018
commented Jan 27, 2018
Thanks for the fix @Bloodcast69, but After clicking a Dropdown item the nav bar still doesn't collapse |
commented Jan 28, 2018
@Tooluloope could you please temporarily remove mdbRippleRadius directive from dropdown component to check if that helps? |
commented Mar 3, 2018
Any update on this? My navbar still won't collapse once clicked on an item. |
commented Mar 5, 2018
dec23rd1986 - which problem did you encounter? Navbar doesn't close after clicking in mobile view? If yes, please add routerLink='/' to every element. Please give me more information. Best Regards, Damian |
commented Mar 6, 2018
Hi there, I added the routerLink code and it's still not working. I pasted my code here for reference. |
commented Mar 7, 2018 • edited
edited
Dear @dec23rd1986 please add routerLink to a's elements instead of li's. That should work now. If not, please check if you have configured routes correctly. Best Regards, Damian |
commented Mar 7, 2018
I switched routerlink to the tag rather than |
commented Mar 8, 2018
Wait a moment... Are you using code from jQuery instead of Angular one? It's looks like jQuery. Please use navbar code for Angular: https://mdbootstrap.com/angular/components/navbars/ , and add routerLink='/' to every a element. Best Regards, Damian |
reopened this Mar 8, 2018
commented Mar 22, 2018
What worked for me was to add the dropdownToggle directive to each of the link tags. One of mine looks like this: <a mdbRippleRadius (click)='logout()' href='#' dropdownToggle>Logout</a> |
commented Mar 22, 2018
I still can't make it work. What is strange is how when I click the toggle button, it opens up out of the page rather than down. |
commented Mar 23, 2018
Dear @dec23rd1986 we're providing dropup variation of dropdown. Instead of dropping down elements, it's dropping up. Maybe you're using this type of dropdown? |
commented Mar 24, 2018
Hi @Bloodcast69, I think I'm missing a few things here:
I hope this makes sense. Thanks! |
commented Mar 26, 2018
![Angular bootstrap table Angular bootstrap table](http://www.dailywebtuition.com/wp-content/uploads/2018/05/Angular-File-Hierarychy.png)
Dear @dec23rd1986 1st question: There you can find every information that you need to use our dropdowns: https://mdbootstrap.com/angular/components/dropdowns/#introduction 2nd question: If you're thinking about closing navbar hamburger after clicking on some items when mobile, you have to add routerLink with some specific address (for example, for your home link, routerLink='/home'. But if you're not thinking about navbar, but dropdowns, there's already implemented a solution, to close one dropdown after clicking on another one. Hope that my answer is clear to you. If not, feel free to ask me more. Best Regards, Damian |
commented May 1, 2018 • edited
edited
None of the solutions listed here work for me. Is there a tutorial from scratch out there? There are soooo many things that could have gone wrong here. |
commented May 2, 2018 • edited
edited
@daveparks23 I never found a solution via mdbootstrap, however through much digging I found out that this is a common issue. Someone via stack overflow came up with a solution that has worked wonders for me. You can read about it here: https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click/42401686#42401686 I included this code in my jQuery section at the end of my index page: <script> $('.navbar-nav>li>a').on('click', function(){ $('.navbar-collapse').collapse('hide'); });</script> Hope that works for you! -Andrea |
commented May 3, 2018
Thank you so much! |
closed this May 3, 2018
commented May 5, 2018 • edited
edited
New! html: use: <li [routerLinkActive]='['link-active']' (click)='onMenuClick()'> ts: import { Component, ElementRef, Renderer } from '@angular/core'; import { Directive } from '@angular/core/src/metadata/directives'; @component({ selector: 'nav-menu', templateUrl: './navmenu.component.html', styleUrls: ['./navmenu.component.css'], }) export class NavMenuComponent { constructor(private el: ElementRef, private renderer: Renderer) { } } |
commented May 11, 2019
This worked for me: app.component.html app.component.ts Hope it helps :) |
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment