collapse plugin renders a rising scrollbar on bootstrap navbar

[stevebread]

Plunker: https://plnkr.co/edit/2H4yZfl6zSM0WmVzaba8?p=preview

Make sure the right panel is wide enough so that the navbar does not collapse and you will see a horizontal scrollbar (on initial load / refresh) that floats upwards starting from the bottom of the navbar.

The scrollbar does not appear if the navbar content is added to the file directly instead of using ng-include.

Removing the navbar-right content makes the scrollbar appear to go away but an element is still floating upward which can be detected as it passes over the 'Left' text.

Found this while upgrading from 0.13.4. It was introduced in 0.14.0.

(Edit: changed plunker URL to go straight to preview)
(Edit: mention that this comment is related to ng-include)

[wesleycho]

ng-include is an anti-pattern - there is no good use case for it.

Not able to reproduce this - what OS/browser are you seeing this on?

[stevebread]

DIdn't know ng-include was an anti-pattern. That's how the angular-fullstack generator sets up the nav bar component.

I am on Win 7 and am able to repro in FF 44.0.2 and Chrome 48.0.2564.109 m

After expanding the right panel in the plunker to show the uncollapsed nav, the preview must be refreshed using the Refresh button in the plunker

[stevebread]

I tried it with a directive and the behavior is similar to ng-include. When the directive is in the top-level page, the navbar displays fine but when the navbar directive is in a view, then the issue occurs.

Plunkr with a directive: https://plnkr.co/edit/MnGQHgXW8pod42xexkkp?p=preview

I've reproduced all 3 scenarios in this plunker
v1: The original issue using ng-include
v2: No issue when navbar directive is in index.html
v3: Issue when navbar directive is in a view

[davincho]

+1 - I have got the same problem with the horizontal scrollbar.

[kolkov]

+1 - I have got the same problem with the horizontal scrollbar.
https://in-frame.com:8088/angular#/home

[vazh]

im using ng-include too, i thought it was because of collapse. but when i patch the collapse with earlier version the scroll when changing page / refresh doesnt disappear.
im currently already changing to 3 version.
i forgot the first version. but it start with 0.1_._ -> 1.4.0 -> 1.1.0
both collapse scrollbar and navbar scrollbar doesnt disappear.

[Sheparzo]

+1 - Encountering this issue as well

[kolkov]

The problem is when navbar open and close at the same moment.
If in first plunker change
$scope.isCollapsed = true;
to
$scope.isCollapsed = false;
result: no rising scrollbar.

[kolkov]

Best example for new version!)
http://stackoverflow.com/questions/38004168/navbar-dropdown-with-angular-and-ui-router-wont-work

[MetaEvan]

Encountering this as well.

Kolkov's suggestion to initialize the isCollapsed = false works, but it means that on small screens, the hamburger dropdown defaults to open. On the hamburger menu itself, you get a vertical errant scroll bar, which I was able to disable by setting its overflow to hidden, but this is obviously not optimal.

[jadir-junior]

@kolkov in this link the navbar isn't with angular-animate.

[jadir-junior]

i'm with the same problem, if I add angular-animate the scrollbar appear without angular-animate it desapear.

[jadir-junior]

woooooowww, I think a solution, if I put the css class in my code, working for me
.navbar-collapse.in {
overflow-y: hidden;
}

[stephenHartzell]

I've been struggling with this same issue for ages. I can't seem to figure out a working solution.

[Rafi993]

is there any example of this solution used.

[Rafi993]

Im still having this problem even after using that css class

[stevebread]

@wesleycho The plunker still shows the scrollbar issue after changing the angular-ui-bootstrap version to 2.1.3. Using the second link above: https://plnkr.co/edit/MnGQHgXW8pod42xexkkp?p=preview

[Rafi993]

it would be best if somebody puts up working example of the solution before closing the issue

[stephenHartzell]

I also still see this issue with the latest version of angular bootstrap ui

[Rafi993]

Please somebody who has solved this issue put up a an updated Plunker example.

[Rafi993]

@jadir-junior could you provide example of working example

[stevebread]

@wesleycho This issue was introduced by commit 533a9f0 which switched to using $animateCss. I did some tracing and found that the watcher is called twice and therefore collapse() is called twice. The second execution of collapse() is what produces the rising scrollbar.

The Angular docs for $watch have this to say

Be prepared for multiple calls to your watchExpression because it will execute multiple times in a single $digest cycle if a change is detected.
...
After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change

[Rafi993]

@stevebread did you solve it?

[stevebread]

@Rafi993 I can get it to work by patching collapse.js but I'd rather have an official fix. If you are ok to patch it locally, replace this line in collapse.js (or ui-bootstrap-tpls.js if you are using bower)

scope.$watch(attrs.uibCollapse, function(shouldCollapse) {

with

scope.$watch(attrs.uibCollapse, function(shouldCollapse, shouldCollapseOldValue) {
  if(shouldCollapse === shouldCollapseOldValue) return;

[stevebread]

I had to look into this some more because I realized that collapse() is not being called twice, the page I was testing with had a second collapsible component in addition to the menu and that's why I was seeing 2 calls. The above fix still works for the navbar but the second collapsible component displays open even though uib-collapse=true

So what's needed then is that if a component is collapsed by default it should have the correct markup i.e. if uib-collapse attribute is true by default, then the element should have collapse class as well. This is how the bootstrap menu is defined. If you are not already doing this then I recommend doing it because it will avoid unnecessary collapse animations when the page renders and the directive doesn't have to try to handle this case.

[mekhtiari]

Meanwhile this issue is really fixed, this piece of CSS could be a workaround:

.collapsing.in {
  overflow: hidden;
} 

[Rafi993]

then please post a working plunker example @MohsenEkhtiari

[mekhtiari]

Sure,
Plunker: https://plnkr.co/edit/BCLseK8C7MEI2ZQijjcS?p=preview

[Rafi993]

thanks @MohsenEkhtiari

[jonaszuberbuehler]

@MohsenEkhtiari Your fix didn't work for me. I had to use .in-remove-active to fix it:

.collapsing.in-remove-active {
    overflow: hidden;
}

[mekhtiari]

@jonaszuberbuehler I have this scrollbar problem when navbar is opening not when it is collapsing or collapsed. Could you provide a plunker case which needs your fix?

[jonaszuberbuehler]

@MohsenEkhtiari Yes, https://plnkr.co/edit/6TJ4socmsTRicOVoAJUJ?p=preview. I know, ng-include is considered an anti-pattern and should be replaced. But I suppose the code in the plunkr should work.

[davincho]

@MohsenEkhtiari Still can see the horizontal scrollbar (latest Chrome on Ubuntu 15.10)

[AlexZeitler]

.fix.navbar-collapse {
  overflow-x: hidden;
}

<div class="collapse fix navbar-collapse" uib-collapse="navCollapsed">

Did the trick for us.