m5seppal m5seppal - 9 months ago 56
Javascript Question

How to make Bootstrap 4 navbar to use flexbox

I'm trying to make Bootstrap 4 navbar to use flexbox. I was almost able to make it, but there is still some strange Javascript issue. Everything seems to work first but if I toggle open navbar once and then close it, Bootstrap javascript adds element style "height: 0px;" to navbar-toggleable-{} class. This makes element to be positioned improperly since I use "align-items: center" in parent element and when height is set to be zero, then elements top is thought to be the center. If I manually remove that style from element, it "fixes" the problem.

Picture below is showing my problem:

enter image description here

This is only case which is failing. If element is open when I resize window up, element is in it's normal position and there is no extra style added by Javascript. And if I don't open collapsed navbar ever, everything works.

So my question is, how I could implement Bootstrap 4 navbar which is actually working and using flexbox? I guess easiest fix is to stop Bootstrap adding that extra style to element. It's not needed since if that element is not visible, then it has "display: none" anyway. And if it's visible, height shouldn't be certainly zero.

I did some more research and found that if I add removeAttr('style') to right place in Bootstrap javascript, then it seems to fix the problem. However, I'm not sure if that is the right approach to fix that.

Answer Source

This problem was fixed in Bootstrap 4 Alpha 5 release. So updating Bootstrap solved the problem.