Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Twitter Bootstrap Responsive Navbar broken with 1.0.3 release #1674

Closed
davisford opened this issue Dec 8, 2012 · 12 comments
Closed

Twitter Bootstrap Responsive Navbar broken with 1.0.3 release #1674

davisford opened this issue Dec 8, 2012 · 12 comments

Comments

@davisford
Copy link

Hi, I'm trying to use the Twitter Bootstrap responsive Navbar with AngularJS. When I upgraded from 1.0.2 to 1.0.3 the responsive navbar feature stopped working.

The responsive features work in terms of the viewport changing layout when resized, but under a smaller viewport, you can no longer click on the button to expand the navbar menu.

I created a jsfiddle example here: http://jsfiddle.net/ghtC9/2/ that includes angular-1.0.3.js

The HTML code was cut/paste from the bootstrap example for Responsive Navbar (section found under here):

Here's the same jsfiddle http://jsfiddle.net/ghtC9/5/ that includes angular-1.0.2.js -- note that the menu button now expands when clicked.

I tried loading them in different orders: 1) bootstrap 2) angular vs. 1) angular 2) bootstrap - makes no difference.

There is nothing in the console giving any indication of an error.

@apb2006
Copy link

apb2006 commented Dec 9, 2012

+1

@davisford
Copy link
Author

Same problem with angular 1.1.1

@nodokodo
Copy link

+1 for 1.0.3, no errors anywhere.

Actually, I've just re-ordered my build and it's working OK

angular, angular-resource, jQuery, bootstrap*

Originally had jQuery & bootstrap first due to this exact issue (collapse not working); haven't tested further as yet.

@davisford
Copy link
Author

@nodokodo - i'll be a monkey's uncle -- if you re-order as follows:

  1. angular.js
  2. jquery.js
  3. bootstrap.js

It does fix it!

jsfiddle updated: http://jsfiddle.net/ghtC9/6/

Unfortunately, this causes a host of other issues. I'm also using angular-ui, and it fails horribly if I re-order so jquery loads after angular.

@shahmirn
Copy link

I had the same issue in my application until I changed

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">

to

<a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">

that is, I added href="#" to the anchor tag.

@nodokodo
Copy link

@shahmirn that's the ticket, cheers

@Letsan
Copy link

Letsan commented Dec 14, 2012

Seems related to the click issue with jQuery when no href is given. That should explain why adding the href="#" fixes the problem.
#1651
#1662

Problem is, when using a dropdown, if each

  • item has no href defined or is empty, then clicking the item will trigger the ng-click callback but it will not close the dropdown as normal because of the return false in the click handler.

  • @davispw
    Copy link

    davispw commented Dec 18, 2012

    This is caused by c81d817. Quick fix: comment out "return false".

    @Letsan
    Copy link

    Letsan commented Dec 19, 2012

    I'd close this issue is caused by click event not propagating. (#1651)

    @amit777
    Copy link

    amit777 commented Jan 4, 2013

    In case it helps anyone, I change the anchor tag to a button tag, and it works nicely. The problem with add href="#" to the a-tag is that when you click the dropdown button, angular will redirect you to your homepage route.

    I've only done a little testing, but it seems to work.

    This is the article that I read that helped: http://onehungrymind.com/quick-note-ng-disabled-and-anchor-tags-oh-noes/

    @Letsan
    Copy link

    Letsan commented Jan 4, 2013

    The best fix is to comment out the line which is causing the issue as mentioned by @davispw

    Just changing anchor elements to inputs doesn't change the fact that click events aren't propagating thanks to the return false in c81d817

    IgorMinar added a commit that referenced this issue Jan 8, 2013
    This reverts commit c81d817.
    
    This commit causes several issues (#1651, #1674, #1662) and doesn't even
    contain a test that proves that anything on Opera got actually fixed.
    
    If the original Opera resurfaces, we'll fix it properly.
    IgorMinar added a commit that referenced this issue Jan 8, 2013
    This reverts commit c81d817.
    
    This commit causes several issues (#1651, #1674, #1662) and doesn't even
    contain a test that proves that anything on Opera got actually fixed.
    
    If the original Opera resurfaces, we'll fix it properly.
    @IgorMinar
    Copy link
    Contributor

    fixed by 14948cf

    jamessharp pushed a commit to jamessharp/angular.js that referenced this issue Jan 18, 2013
    This reverts commit c81d817.
    
    This commit causes several issues (angular#1651, angular#1674, angular#1662) and doesn't even
    contain a test that proves that anything on Opera got actually fixed.
    
    If the original Opera resurfaces, we'll fix it properly.
    Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
    Labels
    None yet
    Projects
    None yet
    Development

    No branches or pull requests

    8 participants