0
I have a problem which is this::
I’m using Materialize CSS, and Vue Js. I have a table with entries, and in each register has a checkbox next to it to be able to perform some action with this registration, as send notification by email, etc. And I can also mark all the items at once, and everything works as planned.
The problem is that when more than 500 entries are listed, the checkbox starts to choke on the browser, and when that number exceeds 1500 entries, the site simply stops responding.
I use a 5th generation Intel i5, 8gb ram and SSD. I imagine that’s not my hardware choking.
I wonder if you have how to optimize this checkbox of Materialize, or disable the transition animations, because when you have many items listed on the screen and at the time of selecting all at once, the animation Uga, and it slows down the application.
Follow a snippet of how the checkbox is:
<label>
<input type="checkbox" v-model="movconta.marcado" @click="marcaItem(movconta, val)" />
<span></span>
</label>
which version of Materialize vc is using?
– hugocsl
1.0.0-rc.2, I believe is the latest version
– Otavio
If you think it’s because of the CSS of chackbox, just vc do a quick test and display:None nos :before and :after of the span within the label of the checkbox, and in this class put like this.
[type="checkbox"]:not(:checked), [type="checkbox"]:checked { posintion:initial; opacity:1;}This will make the checkbox kind of go back to the original state and you can test without the Materialize styles. If you prefer you can trim Span at once just to test it, but then Chack box is without the text, it would only be for performance test. If you do not resolve check the browser console if you have an error– hugocsl