Bulma: BUG: columns.is-variable overflow

[jimblue]

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.6.1]

Description

columns with is-variable is bigger than parent container which cause an overflow.

Expected behavior

This configuration shouldn't create an overflow.

[mrbudlong23]

FIGURED IT OUT!

For anyone else experiencing this. Edit your .columns

It's going to have a left and right margin of "-0.75rem".

Remove those and the problem will be fixed.

[jimblue]

Thanks @mrbudlong23 !

That fix would probably need a review from @jgthms to be incorporated into Bulma.

[jimblue]

Hey @jgthms can we have your input on this?

[wilchak]

I am having this issue too. Removing the margins as described above works.... but WHY are those entries there in the first place? Presumably they have some kind of purpose....

[wdehaes]

I would not recommend removing the margins from the columns class. They make it possible to push content to the end of the container, otherwise you will always have a padding of 0.75rem on both sides (or more/less if you have variable gaps or set a custom $column-gap). What worked for me is setting the css property overflow-x: hidden on the container class.

[Gameghostify]

A quick fix to this issue seems to be:

.columns { width: 100%; }

(and, if applicable, height: 100%;)

I have not tested this for other use cases than mine, but it did work.
Please report back.

[cyrilchapon]

Every fixes proposed here don't take is-mobile modifier into account. Please remember 100% width columns is not the only use-case here.

EDIT :

• It only happens in Safari, (both safari desktop when resized under mobile breakpoint, and iphone)
• It only happens when is-variable is > 6 (is-variable is-7, is-variable is-8, ...)
• Because, over is-6, the .columns negative margin is larger the wrapping [section | hero-body | footer] and container

[emkajeej]

Some points;
it happens on Chrome in Responsive view as well, and on most mobile devices.
It is not exclusive to .is-variable or .is-multiline.

The -.75rem margin is meant to offset a padding of .75rem of a columns container, however this is not being set anywhere.
A fix would be to add a .has-columns class to a container which sets a padding of $column-gap to each side. This isn't needed when using nested columns however, so only use .has-columns on the outermost .columns container.

A pen: https://codepen.io/anon/pen/BVKJad

[edit] This breaks .is-gapless though, so don't use them together.

[cyrilchapon]

I personally just overflow: hidden on the .columns' container, on mobile only

[emkajeej]

Which is great until you actually need the overflow, e.g. when your columns contain box-shadows. :(

[cyrilchapon]

Yes..

[PovilasSam]

any update on the fix @jgthms ?

[erquhart]

Summary
This issue has been raised a bunch of times, likely causing it to seem less urgent as a single issue hasn't stood to rack up reactions from impacted devs. Here are all of the duplicates I could find, some of which are still open:

• #1561
• #2242
• #776
• #449
• #766
• #817
• #2234
• #931
• #660

Bulma needs containers
Bulma grids are similar to Bootstrap, using negative margins on rows (Bulma's .columns is equivalent to Bootstrap's .row). Because negative margins always cause side scroll, Bootstrap requires a .container wrapper around rows of columns, providing padding to absorb the negative margins.

@jgthms is there a reason not to do something like this in Bulma? is-marginless technically works, as you mentioned in #932, but it's a utility helper, and not really made for this. .columns will cause unwanted side scroll without a padded container, so it seems Bulma should include support so it works out of the box.

Bulma Docs is using a container
Even the Bulma docs have to use non-Bulma CSS to work around this issue - there's a padded container. This bug can be reproduced in the Bulma docs like so:

1. Go to https://bulma.io/documentation/columns/sizes/
2. Reduce viewport width to less than 1024px (so the right sidebar is moved to the bottom)
3. Disable two non-Bulma CSS rules:
   
   
   
   • overflow: hidden rule on the main.bd-main element
   
   
   • padding rule on .bd-lead
   
   
4. The page can now be scrolled horizontally

Proposal
Maybe a .grid class can be added to Bulma that does what .bd-lead does for the docs?

[james-wasson]

I have added a .grid style (PR #2567) which may fix the issue when it gets merged in for anyone still looking

[mforcer]

This issue has been here forever, I can't remember a time I've used Bulma and didn't run into this.

Anyway, I managed to solve it by added is-gapless to the columns div.

It seems to have fixed the problem and hasn't caused any problems in my layout that I can see.

[erquhart]

Glad that works for you! But it's definitely a hack, and only works if you don't want gaps between any of your columns, which has been the exception rather than the rule in my experience.

[AkioSarkiz]

.columns {
  margin: 0;
}