Implementing Slickgrid in React. Pagination displays dots over button.

[jsoques]

Hello, I am trying to use Slickgrid Universal in React and I have been sort of successful with some hacking. I am not a CSS expert and was wondering if someone can explain why does the paging nav display dots over the buttons as show in this screenshot.

Thanks

[ghiscoding]

These DOM elements are

so it's probably showing li bullets, you can maybe try this Stack Overflow answer with list-style-type: none;, maybe something like

.slick-pagination {
  list-style-type: none;
}

I don't have that problem and since you can't provide a way to replicate, so it's a bit hard for me to fix something that I can't replicate, you'll have to try a few things and see what works then possibly make a contribution.

[jsoques]

Thanks, I will try this ASAP. Yes the idea is once I get something working that is fairly easy to implement I will make a contribution. Thanks again.

[ghiscoding]

BTW which styling framework, if any, are you using? I think I never caught this problem because most framework (Bootstrap, Bulma) would already have the list-style-type: none; in their CSS hence the reason I never caught it. I can add that line to the areas where I know I'm using Lists, it's just couple of places.

[jsoques]

Material-UI

[ghiscoding]

ok have u had a chance to try the css line I wrote about list-style-type: none;?

[jsoques]

Yes, it worked. Thanks.

[ghiscoding]

@jsoques
A fix was done in PR #486 and is now released under the new version 0.18.0

Thanks for the feedback

[jsoques]

Yes thanks. I will test.

[jsoques]

@ghiscoding I removed the list-style-type: none; and upgraded and it's working. Thanks.

[ghiscoding]

@jsoques I just released an official version of Slickgrid-React v2.0.0 and also added a fully working Live Demo 🚀

[jsoques]

Great, thanks.