With bootstrap-vue no hor scrolling automatically

Hello,
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>
            </b-card-title>

            <div>
            <b-table
                    responsive="true"
                    stacked="false"
                    :items="users"
                    :fields="usersFields"
                    :per-page="0"
                    :current-page="current_page"
            >
                <template v-slot:cell(id)="data">
                    <div class="text-right">{{ data.value }}</div>
                </template>

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

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

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

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

                <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>
                        </router-link>

                        <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>
                        </a>
                    </div>
                </template>

            </b-table>
            </div>

            <b-pagination
                    v-model="current_page"
                    :total-rows="users_total_count"
                    :per-page="per_page"
                    aria-controls="my-table"
            ></b-pagination>


        </b-card-body>
    </b-card>


</template>

<script>

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

    Vue.use(VueResource)

    import appMixin from '@/appMixin';

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

    export default {
        data() {
            return {
                users: [],
                users_total_count: 0,
                usersFields: [
                    'id',
                    {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'},
                    'actions',
                ],
                current_page: 1,
                per_page: 2,
                filter_name: '',
                order_by: 'created_at',
                order_direction: 'desc',

            }
        },

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

        mounted() {
            this.loadUsers()
        }, // mounted() {
        ...


    }
</script>

Setting property
responsive="true"
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 ?

Hi

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