graphical errors
rodrigoAbril opened this issue · 12 comments
Any idea why I get this weird glitches
or why it doesn't occupy the rest of the horizontal space?
(edit)
do you think it could have something to do that im using vuematerial
The styling of this component is based on materializecss.
So you have to use this CSS framework to proper display the table.
@MicroDroid I think we have to declare this in a clearer way for new users. Or remove this dependecy completly and grab the needed CSS from materializecss?!
@thepill I don't think it's great to load Materialize CSS on behalf of the user, as the CSS applies globally.
What we can do instead is declare it better in documentation or something. But before that I'll look into vue-material and see why they don't work together
Grabbing CSS from Materialize sounds better compatibility but much more bloat. I'll see if it's possible to do this without bloat such as by using sass imports or something
@MicroDroid @thepill
I was using this fork of your library beforehand, it doesn't have this visual issues maybe you can get a clue there, I changed to yours because the other one is not really maintained,
https://github.com/ramakrishnamundru/vue-materialize-datatable
Thanks for your help guys.
Sent from my Motorola Moto G (4) using FastHub
@rodrigoAbril I'm looking into it myself just now. I'll see how it goes and report back. But the main reason this didn't work for you is that because vue-material doesn't use Materialize CSS, but some other Material Design library such as MDL
@rodrigoAbril @thepill I couldn't get around that. I tried to see if maybe loading only specific components from Materialize CSS's Sass files could make it work standalone. That worked but I had to load more than half of the library for that, and thus, I would rather not bloat it like that, most people just add Materialize CSS globally. And no, I am not going to copy only applied/used CSS and put it somehow in the plugin.
So the bottom line is, Materialize CSS (and not any other MD library) is a requirement for this library to work.
@MicroDroid , it is ok, I'll import materialize in the scoped styles of my Vue component, maybe that will take care of it, I'll let you know how it goes
Great, and thanks in advance for the report back.
In fact, just make sure that this will add some bloat to your code, considering you're loading the whole Materialize CSS library just for the Datatable component.
I instead suggest you to perhaps find some other plugin that works better for you or perhaps make a fork of this one
Importing materialize inside Vue file scoped styles works
<style lang="sass" scoped>
@import url(http://fonts.googleapis.com/icon?family=Material+Icons)
@import url(https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css)
</style>
@MicroDroid thank you
@rodrigoAbril What about the bottom controls being centered?
@MicroDroid oh yeah its just something that I added to fit a fab-button on the right side
.table-footer
justify-content : center
Ah okay :)