Margins from .row add horizontal scroll to the table

[nullday]

Hi there. So there is the official demo page of the plugin: https://codepen.io/rubanraj54/full/zyZdzN

Even if your browser can fit full width of the table there is a horizontal scroll at the bottom. It's added by .table-responsive class because of extra margins of .row in header or footer of the plugin. Here is the picture: https://imgur.com/a/6rcbU9J

Probably you shouldn't use .row not inside .container or .container-fluid but there is no way to define it via plugin options for now.

I was able to fix it in my project this way:

mounted() {
    // prevent overflow-x scroll bug
    this.$nextTick(() => {
      const tableEl = this.$refs.vueBootstrapTable.$el;
      const headerRow = tableEl.querySelectorAll('thead .row');
      if (headerRow.length) {
        headerRow[0].className += ' no-gutters';
      }
      const footerRow = tableEl.querySelectorAll('.footer-pagination-row .row');
      if (footerRow.length) {
        footerRow[0].className += ' no-gutters';
      }
    });
  },

But this is pretty dirty and it would be nice to fix it on plugin level. Thanks.

[rubanraj54]

Hi @nullday ,

Yes, you're right. This bug is because of the .row class that adds margin-right: -15px. And this is already discussed in bootstrap github issues https://github.com/twbs/bootstrap/issues/10711.

Now I fixed it in the plugin by resetting margin-right: 0px which removes the horizontal scroll bar if the table fits in the browser window and it adds the scroll bar when you resize the window. You will get this fix in the next release.

Extra tips:

And, if you don't want the scroll bar in any case, you can override the default table classes using classes prop to the component as explained here https://rubanraj54.gitbook.io/vue-bootstrap4-table/custom-classes.

Example (if you don't want the scroll bar in any case)

<template>
    <div id="app">
        <vue-bootstrap4-table :classes="classes"
                              :rows="rows"
                              :columns="columns"
                              :config="config">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'

    export default {
        name: 'App',
        data: function() {
            return {
                rows: [...],
                columns: [...],
                config: {
                    pagination: true,
                    pagination_info: true,
                },
                classes: {
                    tableWrapper: "",
                }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

Cheers, Ruby.

[nullday]

Maybe it's better just to use no-gutters class? I believe that .row should be used inside .container by design: https://getbootstrap.com/docs/4.3/layout/grid/

[rubanraj54]

Hi @nullday ,

Thanks for pointing out the no-gutters class. I ll use it in the plugin.

[rubanraj54]

Hi @nullday

I added 'no-gutters' class in the plugin itself and a new version will be released soon with this fix.

Cheers, Ruby.