How to skip materialize css file getting applied to ag-grid components

Question

I have a .cshtml file which contains search/upload/download/save buttons that uses materialize.min.css for styling of these buttons and a ag-grid in the same page to show the uploaded file data in the grid. So the page is referred to both materialize.min.css and ag-grids javascript community edition file ie ag-grid-community.min.js .

I wanted to select each rows of ag-grid and then send it to backend for processing. So i have enabled ag-grids column property checkboxselection . But unfortunately the checkbox in ag-grid is not working (ie not able to check the checkbox) since CSS of materialize.min.css are getting applied to checkbox element instead of ag-grids checkbox CSS .

I have tried below ways to sort this out but none helped,

1. Changed the order of CSS files in my page.
2. Wrote a separate CSS file and copied ag-grids checkbox related CSS and added !important tag to each of its properties.
3. Tried using ag-grids cellclass property.

As per my project structure, I can't have separate CSS file for search/upload/download/save buttons because its written as a separate framework.

Is there any way to bypass materialize.min.css file getting applied to ag-grid ?

Answer 1

I came across the same issue recently and the following worked for me, inspired by this answer .

Add the following CSS to undo the Materialize formatting as per the link above:

[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
  opacity: 1 !important;
  position: relative !important;
  pointer-events: inherit !important;
}

[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
  display: none !important;
}

[type="checkbox"].reset-checkbox+span:not(.lever) {
  padding-left: 10px !important;
}  

Add the following to your ag-grid. This will add the class to all the checkboxes. It needs to called dynamically on the scroll event because ag-grid use DOM Virtualisation.

gridOptions.onBodyScroll = function(){
  var inputs = document.querySelectorAll(".ag-checkbox-input");
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].classList.add('reset-checkbox');   
  }
}