Comments (4)
Hi @nullday
I added 'no-gutters' class in the plugin itself and a new version will be released soon with this fix.
Cheers,
Ruby.
from vue-bootstrap4-table.
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 twbs/bootstrap#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.
from vue-bootstrap4-table.
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/
from vue-bootstrap4-table.
Hi @nullday ,
Thanks for pointing out the no-gutters class. I ll use it in the plugin.
from vue-bootstrap4-table.
Related Issues (20)
- Suggestion HOT 1
- HTML from data not rendering
- action button slot HOT 1
- Vue 3 compatibility
- table tree
- unselectable
- per_page_options drop-down is not working
- Thanks for the great component, but I wish I could change text when count options selected
- tfoot slot
- How to modify filtering query params?
- Defining the Sorting function HOT 1
- Put A Loader in Loading the Data
- How to can I use filters and sorts in Laravel PHP using the Eloquent Model
- Is it possible to have expandable / collapsable columns and row content?
- Select and Deselect programmatically HOT 2
- filter by date (enchancement)
- Loading by CDN issue
- Dynamic dropdown filter modification
- Need Jquery for use in bootstrap 5?
- How to add edit action in each cell? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-bootstrap4-table.