CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-4
m5seppal
m5seppal

Reputation: 1226

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.

Edit: 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.

Upvotes: 0

Views: 182

Answers (1)

m5seppal
m5seppal

Reputation: 1226

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

Upvotes: 1

Related Questions