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.

Sign up for GitHub

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

Jump to bottom

hamburger menu not working #2919

Closed
robeverett opened this issue Dec 10, 2018 · 5 comments
Closed

hamburger menu not working #2919

robeverett opened this issue Dec 10, 2018 · 5 comments
Labels
component: dropdown needs: stackblitz
Milestone
Purgatory

Comments

@robeverett
Copy link

robeverett commented Dec 10, 2018 •
edited

Angular version = 7.1.2
Bootstrap version = 4.1.3
ng-bootstrap version 4.0.0

When I collapse the browser to test the responsive layout the burger appears but clicking it doesn't expand its content.

Your site tells everyone not to use popper or jquery if using ng-bootstrap as it can interfere - I quote:

"Should I add bootstrap.js or bootstrap.min.js to my project?

No, the goal of ng-bootstrap is to completely replace JavaScript implementation for components. Nor should you include other dependencies like jQuery or popper.js. It is not necessary and might interfere with ng-bootstrap code."

But the dropdown wasn't working, so I used ngbDropdown, ngbDropdownToggle and ngbDropdownMenu and now that's working.

But, jquery and popper to make drop-downs work and ng-bootstrap doesn't have the navbar stuff, so you can see the problem here !!!

Developers don't want to have to download windows updates only to be told that if there is a problem then go to the source code on github and hack it, so why do we have to do this with front end code !!??
Or have I missed something ?

`

Navbar 
<ul class="navbar-nav mr-auto">

  <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
    <a class='nav-link' [routerLink]='["/"]' (click)='collapse()'>
      <span class="sr-only glyphicon glyphicon-home">(current)</span> Home
    </a>
  </li>

  <li [routerLinkActive]='["link-active"]'>
    <a class='nav-link' [routerLink]='["/counter"]' (click)='collapse()'>
      <span class='glyphicon glyphicon-education'></span> Counter
    </a>
  </li>

  <li [routerLinkActive]='["link-active"]'>
    <a class='nav-link' [routerLink]='["/fetch-data"]' (click)='collapse()'>
      <span class='glyphicon glyphicon-th-list'></span> Fetch data
    </a>
  </li>

  <li class="nav-item dropdown" ngbDropdown>

    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
       ngbDropdownToggle>
      Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown" ngbDropdownMenu>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>

  </li>

  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
`
@pkozlowski-opensource
Copy link
Member

I'm sorry but this is not clear from the provided description what is not working. We absolutely need a minimal reproduce scenario as requested in the issue template: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/README.md#you-think-youve-found-a-bug

@pkozlowski-opensource pkozlowski-opensource added this to the Purgatory milestone Dec 11, 2018
@robeverett
Copy link
Author

What is "not working" is the compatibility between ngx-bootstrap, ng-bootstrap and twitter bootstrap.
And the fact that I didn't want to include jquery and popper but wanted to follow a 'leaner' pattern.

I have fixed this now anyway and am posting my index.html mark-up here to help anyone else that runs into bootstrap problems:

`<!doctype html>

<title>Angular Seven</title> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> Loading... `

@pkozlowski-opensource
Copy link
Member

pkozlowski-opensource commented Dec 11, 2018 •
edited

What is "not working" is the compatibility between ngx-bootstrap, ng-bootstrap and twitter bootstrap.

We never had and won't ever had compatibility between ngx-bootstrap and ng-bootstrap as our goals - in fact we are discouraging using both projects together. If you are counting on using both together you might be coming to those projects with wrong assumptions.

As for the bootstrap itself - ng-bootstrap needs only bootstrap's CSS - no jquery, no popper and no bootstrap.min.js. If you use those there is no point of using ng-bootstrap as it is mean to be replacement for the mentioned JS files.

ng-bootstrap should work without jquery, popper and bootstrap.min.js - if it doesn't that this is a bug for which we need a minimal reproduce scenario (hence my request).

@robeverett
Copy link
Author

robeverett commented Dec 11, 2018 via email

@maxokorokov
Copy link
Member

Duplicate of #738
However opened #2928 to update documentation on the demo site

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: dropdown needs: stackblitz
Projects
None yet
Milestone
Purgatory
Development

No branches or pull requests
3 participants
@pkozlowski-opensource @maxokorokov @robeverett