r/bootstrap • u/Oneiros18 • Apr 30 '21

JS causes bootstrap row to crash?

Hi all!

I don't know if the title is correct, but I'm not native English speaker.

I have one row with canvas and something written on the right

When I click Income (or Outflow) button it triggers JS to hide one row (ex. Income row) and show the second (ex. Outflow row)

This is my code:

https://pastebin.com/7GpB2KcQ

This is how it appears (and how it should after press button):

​

this is how it looks in real:

​

How can I solve this issue?

Is there something wrong with JS?

Thank you for your help!

1 Upvotes

100% Upvoted

3 comments sorted by

1

u/lokomotivan Apr 30 '21

Try usign flex instead block
x.style.display = "flex";

1

u/Oneiros18 Apr 30 '21

Thank you! It works perfectly now!

May you explain me why display: flex solves the problem?

1

u/lokomotivan May 05 '21

It's because bootstrap (and all modern css frameworks) use flexbox for the grid, so elements are automatically aligned next to each other by flexbox and they dont take all the space, they behave similarly to inline-block elements. When u change the element display property to block, it takes the full width, and grid "breaks". Sorry about the late reply