Bulma: overflow when columns no inside section or container

Created on 5 Sep 2019 · 4Comments · Source: jgthms/bulma

This is about Bulma

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.7.5
My browser is: Chrome
My OS is MacOS 10.14.6 (Mojave)

Description

Steps to Reproduce

<html>
  <body>
    <div class="columns">
      <div class="column"></div>
      <div class="column"></div>
   </div>
  </body>
</html>

Expected behavior

when swiping right/left on a magic-mouse or touch-pad the page will show an elastic stretch right/left (this is normal)

Actual behavior

swiping left works, swiping right doesn't.

Source

doomedramen

Most helpful comment

The only solution I have found to this is to wrap the columns in overflow:"hidden"

<html>
  <body>
    <div style="overflow:hidden;">
    <div class="columns">
      <div class="column"></div>
      <div class="column"></div>
   </div>
   </div>
  </body>
</html>

doomedramen on 5 Sep 2019

👍4 😕1

All 4 comments

The only solution I have found to this is to wrap the columns in overflow:"hidden"

<html>
  <body>
    <div style="overflow:hidden;">
    <div class="columns">
      <div class="column"></div>
      <div class="column"></div>
   </div>
   </div>
  </body>
</html>

doomedramen on 5 Sep 2019

👍4 😕1

a recurring issue. some fixes mentioned here: https://github.com/jgthms/bulma/issues/1540/.
I have the padding set to .container by default. ymmv.

emkajeej on 8 Sep 2019

This is a duplicate of https://github.com/jgthms/bulma/issues/1540

Thank you

doomedramen on 9 Sep 2019

The only solution I have found to this is to wrap the columns in overflow:"hidden"
<html>
  <body>
    <div style="overflow:hidden;">
    <div class="columns">
      <div class="column"></div>
      <div class="column"></div>
   </div>
   </div>
  </body>
</html>

right!