With bootstrap-vue no hor scrolling automatically

With bootstrap-vue: 2.1 I implemented tables with big number of columns and I want to make scrolling of
columns, but failed with page like :

    <b-card >

        <b-card-body class="">

            <b-card-title class="mb-2">
                <h4>You can control users in system</h4>

                <template v-slot:cell(id)="data">
                    <div class="text-right">{{ data.value }}</div>

                <template v-slot:cell(name)="data">
                    <div class="text-left admin_table_cell">{{ data.value }}</div>

                <template v-slot:cell(status)="data">
                    <div class="text-left admin_table_cell">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>

                <template v-slot:cell(permission_text)="data">
                    <div class="text-left admin_table_cell">{{ data.value }}</div>

                <template v-slot:cell(email)="data">
                    <div class="text-left admin_table_cell">{{ data.value }}</div>

                <template v-slot:cell(actions)="data">
                    <div class="text-center admin_table_cell">
                        <router-link :to="{name: 'adminUserEditor', params: {id: data.item.id}}" :class="'p-1 a_edit_item_'+data.item.id">
                            <i :class="'i_link '+getHeaderIcon('edit')" title="Edit user"></i>

                        <a v-on:click="removeUser(data.item.id, data.item.name, index)" :class="'p-1 a_delete_item_'+data.id">
                            <i :class="'fa fa-trash'"></i>






    import Vue from 'vue'
    import VueResource from 'vue-resource'


    import appMixin from '@/appMixin';

    import {settingCredentialsConfig, settingsJsMomentDatetimeFormat, settingsUserStatusLabels} from '@/app.settings.js'

    export default {
        data() {
            return {
                users: [],
                users_total_count: 0,
                usersFields: [
                    {key: 'name', sortable: false},
                    {key: 'email', sortable: false},
                    {key: 'status', sortable: false},
                    {key: 'first_name', sortable: false},
                    {key: 'last_name', sortable: false},
                    {key: 'phone', sortable: false},
                    {key: 'website', sortable: false},

                    {key: 'permission_text', label: 'Permissions'},
                current_page: 1,
                per_page: 2,
                filter_name: '',
                order_by: 'created_at',
                order_direction: 'desc',


        name: 'usersAdminListingPage',
        mixins: [appMixin],

        mounted() {
        }, // mounted() {


Setting property
I expected hor scrolling automatically, but failed and I have all page design broken
and shifting at all left-right.

Which is valid way to make hor scrolling automatically ?


I you must either just use the attribute responsive or use :responsive=“true”. If you use responsive=“true” will responsive be set to a string “true”. The colon or v-bind: makes the value of the attribute be evaluated as a javascript expression.

1 Like