is-narrow inconsistent

[ssbanerje]

This is about Bulma and the Docs.

Overview of the problem

Bulma behaves differently from what is implied in the docs about responsive behavior of the grid column system. Particularly how the is-narrow-* classes interact with the other width classes of the grid system, e.g., is-one-quarter-* .

I'm using Bulma version [0.8.2]

Might be related to #2783 -- Not clear: description in that issue is not too verbose.

Steps to Reproduce

Consider the following snippet

<div class="columns">
  <div class="column is-one-quarter-tablet is-narrow-desktop">
    <code>is-one-quarter-tablet</code><br>
    <code>is-narrow-desktop</code><br>
  </div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Expected behavior

You would expect this to be a quarter sized column at the tablet break point. And then be a narrow column for the desktop and larger breakpoints.

At least this is what is implied in the documentation sections Different column sizes per breakpoint and Narrow column.

Actual behavior

The column is quarter sized for all breakpoints larger than tablet.

Potential Solution

It seems that the width field set in

&.is-one-quarter-tablet
  flex: none
  width: 25%

is never unset in

&.is-narrow-desktop
  flex: none

This seems to be what #2783 is pointing to.

Either the documentation should be changed to clarify this, or the width should be unset (I am not sure if this interacts badly with any other Bulma components).

[cemulate]

I'm having the same issue. If you are including/building Bulma's SCSS, you can work around this with the following kind of hack in a theme file:

div.column.is-narrow-widescreen.is-full-desktop {
    @include from($widescreen) {
        width: unset;
    }
}

with whatever breakpoints are relevant to your case.