Navbar issues

[tagraha]

The default navbar (http://getbootstrap.com/components/#navbar) act a little bit weird when : I click dropdown (keep it opened) and then resize the browser until the navbar-toggle button appear, click it, open the dropdown and then maximize the browser. after those step, I can't open the dropdown on navbar default state..

[zlatanvasovic]

What browser are you using? Everything works well on Chrome.

[tagraha]

I'm using Google chrome. On my previous bootstrap 3 files, everything works fine, Until I sync it today and replace it (both unminified css & js file). I'm glad I have a backup bootstrap files :)

[wonderment]

This issue exists for us as well. Same browser.

[zlatanvasovic]

I think that found the thing causing the bug. No one of browsers can works in all test cases, but this is due to the viewport (dropdown forgets the place where should appear).

@Nugrata Please, don't try to kill your browser. This test case is too aggressive.

[tagraha]

I've got a trick to avoid the bug appearing when we maximize the browser. default bootstrap markup : <div class="collapse navbar-collapse navbar-ex1-collapse">

the bug appear when we maximize the browser and we have <div class="collapse navbar-collapse navbar-ex1-collapse in"> I've tried to change in class to collapse. and it's works. bootstrap navbar is back to normal. in the end, we would have this markup when our browser is maximized : <div class="collapse navbar-collapse navbar-ex1-collapse collapse">

anyway, this is just a trick. my javascript skill is not yet able to fix this.. :(
you can use https://github.com/louisremi/jquery-smartresize for resize event or anything else to manipulate the markup. hope this can solve our problem :)

[ghost]

próbáltam változtatni az osztály, és ez működik. bootstrap Navbar visszatért a normális kerékvágásba. a végén,a javascript készség még nem tudja kijavítani ezt ..amikor maximalizálja a böngésző, és mi?, hogy elkerüljék a hiba jelenik meg,

[bassjobsen]

Or try to add to your CSS:

@media (min-width: 768px) { .navbar-collapse.in{ overflow-y:visible;} }

[Sandreh]

When I add:

@media (min-width: 768px)
{
.navbar-collapse.in{ overflow-y:visible;}
}

"navbar-right" or "pull-right" doesn't work anymore.

The solution of Nugrata works fine

[polydigm]

@zdroid This problem happens for me using the latest Google Chrome. The finer points of this bug are not about the original navbar drop down but the collapsed navbar drop down. If that is up when you re enlarge the window it's fine. The bug only occurs after clicking on the little three lined icon if you then re enlarge the window while the revealed stacked navbar is still down.

[polydigm]

Is this now the definitive thread and is there a definitive answer?

[zlatanvasovic]

Again, sorry @polydigm. This is an issue about Chrome's viewport resize, and things like this happens on many sites, undependent of framework (like Bootstrap).

So, I think that this issue can be closed. How to fix it? Don't play games with your browser's viewport.

[polydigm]

@zdroid I disagree. If I write my website using the bootstrap system and any visitor to my site has a good reason to shrink their window for a while and later regrow the window they have a right to be alarmed and not accused of playing games with their viewport. It is a bug, and even though there may be workarounds, although it's not clear to me what the definitive workaround is, it's not fixed until it's fixed to everyone's satisfaction in a future version of bootstrap.

[zlatanvasovic]

@polydigm That's all about viewport. You should report bug in Chrome bug tracker. ;)

[polydigm]

@zdroid I think we have a misunderstanding here. The bug I'm referring to is the one I described in the thread that has been closed because it was assumed to be the same as this one. That bug happens exactly the same in Safari, Firefox and Chrome. It is not just a Chrome issue. It is more likely a bootstrap issue. Try the link above to issue #11603 and read my description of the issue.

If these issues are at cross purposes perhaps we need to separate them. I originally assumed when it was pointed out to me that my issue was a duplicate, that this issue was the same, hence why am commenting here now. I think this is definitely a bug in bootstrap and not just a browser issue given that three distinct browsers repeat the same behaviour.

[cvrebert]

I'm not going to close this issue.

[zlatanvasovic]

@polydigm I don't know, but it looks like viewport issue (happens when resize window). I know that it can be fixed, but I don't think it's issue directly within Bootstrap.

[polydigm]

@cvrebert I didn't think you were going to close this thread. I was referring to the closure of #11603.

@zdroid If you can show me a solution that you think works I'll try it out and see.

[zlatanvasovic]

i don't have complete solution, I'm just avoiding window resizing games, so far. 😄

[polydigm]

@Nugrata I'm not finding your suggested solution that clear. I'm new to bootstrap. Would you mind perhaps expanding on what exactly to do and where in order to fix this problem. Right now I can't see the forest for the trees.

[polydigm]

@zdroid It's not about what we're doing. We can't avoid what our web site clients are going to do. They are the ones who will get annoyed with our web sites and that's what concerns me. We can't in all seriousness post a directive on our home pages for users to not play silly whatsits with their windows.

[bassjobsen]

I added #11499 as a possible solution. But @Sandreh mentioned this will break "navbar-right" and / or "pull-right".

[tagraha]

What I thought is our problem come when we enlarge our browser but the in class within <div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1"> is messing the navbar. so that in class got my attention. let's take a look the css file for a while..

I've found some in class related to our problem

.collapse.in {
  display: block;
}

.navbar-collapse.in {
  overflow-y: auto;
}

@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: auto;
  }
}

remembering that we have a trick to change in class to collapse and it works for me, so i'm interested with @media (min-width: 768px) block rules. Since the collapse class is our savior, I copied the rules and paste it on .navbar-collapse.in rules. The result's look like this..

@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}

With this trick, the default Navbar is working perfectly when we enlarge our browser but we'll get a dropdown opened. I think that's not a big deal since our navbar is back to normal. Hope this trick can solve the problem once again. Please make sure you backed up your file first before trying this trick or you can use another css file to override the rules..

[carasmo]

Everyone concerned about this should get a group of non-developer friends and do not tell them anything is "wrong" and see if they discover this. No regular user does this. If a user wants a window out of the way they click minimize. Most users slightly size down pages but if they do, they're not likely to size it down to see the mobile menu then click the toggle in the menu, pause and not click a link in the menu, but instead decide to re-size their page back up again.

If it happens between flipping orientations, that's where the problem arises. That is a natural thing to do, even by accident, to click something in a menu, and then flip the device to landscape.

[zlatanvasovic]

Yup, that's it.

2013/11/25 carasmo [email protected]

Everyone concerned about this should get a group of non-developer friends
and do not tell them anything is "wrong" and see if they discover this. No
regular user does this. If a user wants a window out of the way they click
minimize. Most users slightly size down pages but if they do, they're not
likely to size it down to see the mobile menu then click the toggle in the
menu, pause and not click a link in the menu, but instead decide to re-size
their page back up again.

If it happens between flipping orientations, that's where the problem
arises. That is a natural thing to do, even by accident, to click something
in a menu, and then flip the device to landscape.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11243#issuecomment-29201239
.

Zlatan Vasović - ZDroid

[polydigm]

@Nugrata Thanks. This works for me. I haven't noticed any side effects as yet, have you? An easy confusion in talking about this is that the navbar has a drop down menu in it. Then, when you shrink the window, the navbar itself becomes a drop down. You don't have to drop the drop down inside the dropped down navbar for this problem to happen. If you do, when you re enlarge the scroll bar is there already. With your fix, if you drop the inside drop down while in a shrunken window, it's still dropped when you re enlarge. I don't think that's a problem. If you were looking at it in the shrunken window, it's not a surprise when you re enlarge. I'm very happy with this now. I hope the developers will be too and that there are no side effects.

[polydigm]

@carasmo I disagree. I don't think you should make too many assumptions about "regular" users. It's clearly a bug and as such should be fixed, just in case. Let's say you're copying information from one window into another open app where a simple cut and paste is not an option and want these two views side by side. Sometimes shrinking both windows is the only option. And even if the majority of examples where a user was doing something like that might be able to be done another way without shrinking windows - we can't go around and reeducate them on an individual basis. And most people that get upset about stuff like that, don't complain and just go away. I don't want that happening on my web sites.

[stephcurt]

If only we could make open source projects from a user-centered design perspective.

[carasmo]

Won't change my mind. Shrinking both menus side by side and then copying pasting are different than deciding to toggle a menu and not click a link in that menu but then decide to just resize the page. Most people will refresh their browser if they happened to do that and discover that things have gone wonky.

Hopefully this responsive crap will go away and all media queries will be min-device-width. I've done small menus where it doesn't even kick in unless that user comes to that site at the break point, not a single client says anything because the check their phone, works fine, check their desktop and tablet and it works fine. Just tell 'em it's adaptive, not responsive and move on.

[stephcurt]

If you feel that way about responsive design why are you contributing to a responsive framework? I think I am misunderstanding what the purpose of participating in the project is. I thought it was to help build a better bootstrap, but after a day of auditing these issues it seems like it is more about reddit style bickering over opinions that really aren't germane to the issues.

[polydigm]

@stephenlcurtis Exactly. You've cut straight to the chase.

[carasmo]

BS3 has the BEST grid system ever and the authors are geniuses. That is why.

This stuff that regular users will not discover is simply not something that's important at all and after a month of seeing this thread, I just had to say something.

I agree with the test case being too aggressive. It's illogical.

If it were a big deal or even a bug IMO, this thread would have more than 9 followers with 2 of them being team members. There would be a lot of +1s.

[stephcurt]

Man I really don't get it. I think I'll choose another project to contribute to.

[cvrebert]

It is indeed an edge case, but one that seems fixable and one that IMHO ought to get fixed.

[polydigm]

@stephenlcurtis Why would you do that in response to one individual's opinion? The project itself is a worthy one.

@Sandreh I've been supporting various levels of computer user in a variety of contexts over many years and your supposition that a regular user wouldn't stumble on this flaw is just plain wrong. Many regular computer users get very quickly frustrated when software doesn't work as expected and generally being non technical, use software in ways that technical creators often won't appreciate. I may not be a regular user but I only just discovered bootstrap yesterday and this bug came up within a very short time of using it, I was simply checking that it was doing what it claimed to be doing.

@cvrebert I agree it's not a major bug but I, like Stephen did not expect to find myself having this discussion here.

[stephcurt]

I picked 20 issues and read through the threads, started doing research to come up with my first fork. I'm seeing this attitude across this entire repo. I really, really like bootstrap and want to contribute, but maybe the popular repos are attracting the wrong crowd? I don't know, I'm new to this so I think I'll be safer with a smaller project for my first go.

[polydigm]

Out of curiosity are @bassjobsen and @cvrebert contributors? There have been quite a few people interested in this issue. An initial problem was that this interest was spread out over 5 duplicated issues.

[cvrebert]

Yes, I'm on the core team: https://github.com/twbs?tab=members

Bass has submitted a number of pull requests and legitimate bug reports.

[polydigm]

Firstly, I should mention that the OP issue occurs in both static and fixed navbars. A related issue that I'm not yet clear about is that the fixed navbar in collapsed form does not push content down when you drop it. Is that intended? Is it too hard to do otherwise because of its fixed state? Ideally I would like a top of the window navbar that stays fixed and visible at the top but pushes content down when you drop it in its collapsed state.

[cvrebert]

@polydigm Intended AFAIK. I think it's just the design choice that was made. I don't know if the alternative you're proposing was ever considered.

[zlatanvasovic]

I found a reason of bug.

When you open a dropdown, resize window, uncollapse navbar, open dropdown and resize window again you'll get a style="height: auto;" on .navbar-collapse. When remove that dummy style attribute you'll be able to see dropdown, again.

[alekdavis]

I have spent many hours trying to figure out what is happening here, and I'm not on the core team, so it is definitely not a completely obscure thing that is unlikely to happen to real people. Hope it gets fixed in a future release.

[zlatanvasovic]

@alekdavis If I found a real way to implement this fix, I'll send a pull request. :)

[alekdavis]

Thank you @zdroid. I got a workaround on StackOverflow (with link to this thread), but I wish I did not have to spend so many hours trying to figure out what was going on. Hope it will help others, too.

[mdo]

Closing for #11653.