Bulma: .table-container not working on desktop

[stanolacko]

This is about the Bulma CSS framework
I'm using Bulma version 0.7.5
My browser is: Chrome 74

I have big table in table-container, which is scrollable on small devices.
But on desktop, if table is bigger than screen, it's not possible to scroll hidden content on right side, which is possible on mobile device.

[james-wasson]

Can you give us an example: jsFiddle, CodePen, etc.?

[james-wasson]

My best guess would be you're not wrapping the table in a .table-container.
However that's not your fault as the documentation doesn't mention it at all.

Here is a working jsFiddle (Notice the div wrapping the whole table)

[james-wasson]

Please don't close this issue until the documentation is updated.

[stanolacko]

@james-wasson You are right.
But check this jsFiddle and try to expand right iframe for size where columns will be in one row.
In this case, table is not scrollable.

[james-wasson]

@stanolacko looks to be an issue with the flex property.
Instead of wrapping the .table-container in a .column try putting the .column on the .table-container:

<div class="columns">
    ...
    <div class="column table-container">
        <!-- Table goes here -->
    </div>
    ...
</div>

I don't think this worth adding to the docs but if @jgthms thinks so then I can add it at the same time.

[stanolacko]

Perfect. It works.
Yes this will be fine to put to documentation.
Thanks a lot for help.

[james-wasson]

@stanolacko You're welcome 😄

[stanolacko]

It will be good to mention in docs also my case: table_containter in column.

[Bizcuit]

Hi @james-wasson
I have the same problem, but my table is nested deep inside the column. That's why it is not possible to apply the fix suggested above. I played a bit with CSS without any success. It only works when I disable "display: flex" on the "columns" class and chrome automatically fallsback to "display: -webkit-box".
Do you guys have any ideas how this can be fixed? (except javascript)

[james-wasson]

@Bizcuit I can help more if you produce a simple JSFiddle or something so I can try to fix it.

[Bizcuit]

Thanks @james-wasson. It is the same as mentioned above.

Here you go: https://jsfiddle.net/89jesr6g/7/

I just found a dirty workaround. It works if you wrap ".table-container" with another div that has "display: grid"

smth like

<div style="display: grid">
<div class="table-container">.....table goes here.....</div>
</div>

[james-wasson]

@Bizcuit If you just want the column to scroll you can use
<div class="column" style="overflow: auto;">
I'm not sure if that will solve this as I'm having trouble deciphering the original problem.

[Bizcuit]

@james-wasson
My entire application has a two column structure. So basically "columns" div is at the very top of the dom hierarchy. Scrollable tables is just a small piece of a content that is in one of two columns. The idea was that only this table is scrollable and not the whole column. Otherwise would have been too simple to fix it :)

[james-wasson]

Yeah, I dunno.
This really seems like a problem with the specs.
I did find one other solution:

• Put max-width: 100% on .columns
• Put max-width: 100% on .column

<div class="columns" style="max-width: 100%">
  <div class="column" style="max-width: 100%">
        <div class="table-container">
      <table class="table is-bordered">
        <thead>
          <tr>
            <th>AAAAAAAAAAAAAAAAAAAAAA</th>
            <th>BBBBBBBBBBBBBBBBBBBBBB</th>
            <th>CCCCCCCCCCCCCCCCCCCCCC</th>
            <th>DDDDDDDDDDDDDDDDDDDDDD</th>
            <th>EEEEEEEEEEEEEEEEEEEEEE</th>
            <th>FFFFFFFFFFFFFFFFFFFFFF</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

[Bizcuit]

@james-wasson
interesting... I've just tried it... Looks like this approach works with very simple html, but in my case it actually becomes even worse. It becomes a mixture of scrolling and hidden content :) Either a problem in the spec or in the html engine of chrome. Have not tried it yet on other browsers though.

[james-wasson]

Well I'm sorry I couldn't help more.
If you find any other solutions post them here so we can incorporate the into Bulma if possible

[Bizcuit]

Thanks a lot for help, @james-wasson
As mentioned before, I found a workaround. Probably not the best one, but works in chrome and safari (which is ok for my app).

<div style="display: grid">
    <div class="table-container">
        <table class="table">...</table>
    </div>
</div>

[Bizcuit]

@james-wasson

Here is an example of the fix:
https://jsfiddle.net/8ebcyLf1/

And here is the original one that has an issue:
https://jsfiddle.net/89jesr6g/7/

Hope this helps.

PS: You guys are working on a fantastic project. Big thanks to the entire team!

[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.