Bulma: Levels frequently don't work as expected

[tristan-shelton]

This is about Bulma.

There is a bug/are bugs.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 0.6.2
My browser is: Chrome 64/Firefox 60

I am sure this issue is not a duplicate

Description

The level component could use improvement especially in regards to level-right as in my experiments with Bulma it frequently does not work as expected. Please take a look as this sample Codepen for a couple of examples:

https://codepen.io/anon/pen/JLrjPg

If the behavior is intended then the documentation should be much more comprehensive as it suggests that a level is a good way to left/right align content on the same level anywhere.

Expected behavior

Level component would right align a level-right item under all circumstances and on the same level as a level-left. Direct level-item descendants would be equally distributed.

Actual behavior

Everything is left aligned.

[Come2Daddy]

Two firsts (.level-right & .level-item in .card-header) are directly related to .card-header with flex capability. Is this necessary ?

For the input case (in fact: one child in .level container), justify-content: flex-end in .level-right doesn't seems to work with one child only, margin-left: auto is prefered with display: flex for parent.

[tristan-shelton]

I totally agree that it's not necessary for level to work in the way I expected, but it's kind of weird to have an element that is supposed to do X but doesn't under circumstances Y and Z.

[bionicles]

^^^ .level-right extends outside .level with certain window widths (or is that outline the snippet?)

[tebogo37]

I am also having the same issue. .level-right is protruding.
I thought it was the is-offset that pulls everything to the side. Any solutions to this?

[smrohrer]

^^^ .level-right extends outside .level with certain window widths (or is that outline the snippet?)

I had a similar issue specifically in Firefox, fixed with

.level-item {
  flex-shrink: 1;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.