Vue-tables-2: Search and Limit Fields not inline when using latest Bootstrap4

Created on 3 Apr 2018 · 2Comments · Source: matfish2/vue-tables-2

Vue.js version: 2.5.16
consumed using: laravel-mix/webpack/browser
FULL error message (including stack trace):
Search and Limit Fields do not show inline when using bootstrap4.
relevant code:
steps for reproducing the issue:
JSFiddle: https://jsfiddle.net/frjkyhbh/

Swap bootstrap.css for latest bootstrap 4:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Use of bootstrap 4 with vue-tables-2:
Vue.use(VueTables.ClientTable, {}, false, 'bootstrap4');

The labels for the search field and limit field are no longer inline.

wontfix

Source

gdesoto-lhs

Most helpful comment

Looks like the div tag surrounding the search and limit fields resets the CSS display to block. Setting the following CSS returns normal behavior:

<style type="text/css">
    .VueTables__search-field {
        display: flex;
    }
    .VueTables__limit-field {
        display: flex;
    }
</style>

gdesoto-lhs on 7 Apr 2018

👍4

All 2 comments

Looks like the div tag surrounding the search and limit fields resets the CSS display to block. Setting the following CSS returns normal behavior:

<style type="text/css">
    .VueTables__search-field {
        display: flex;
    }
    .VueTables__limit-field {
        display: flex;
    }
</style>

gdesoto-lhs on 7 Apr 2018

👍4

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.