CODEWITHSUNDEEP
cssangularjsag-grid
Phil O
Phil O

Reputation: 1668

AngularJS - Override CSS

I've inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following:

.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
    width: calc(100% / 7) !important;
}

This works great for the grid already in use, the grid is nicely divided into 7 columns. My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end up with one extra empty column. Using Chrome for debugging and going into the developer tools, I can see the above CSS and if I change the 7 to a 6, my grid displays perfectly. My question is what is the easiest way to accomplish what I want? I've been trying to adjust the styling in code but haven't succeeded yet. Suggestions?

Upvotes: 1

Views: 1909

Answers (2)

Omar Himada
Omar Himada

Reputation: 2588

I would simply add the modified CSS to a CSS file that renders after all other third-party library CSS files. When you have an !important that happens after another !important, the second one overrides the first. So by adding the CSS to your website it should be fine.

.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
    width: calc(100% / 6) !important;
}

Upvotes: 2

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15184

@Adosi's answer is the preferred solution -- CSS after all refers to cascading style sheets. If, however, you cannot modify the load order of your styles, the following is an alternative solution.

You can override a rule defined in an external stylesheet that has a !important attribute by adding your own definition inline to the element itself. I have demonstrated here using the background-color property as it is more obvious.

#foo {
  background-color: pink !important;
}
<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>

The inline style will always take precedence -- eg be loaded last -- so the color defined there is the one that is displayed.

Note that this is not considered a good practice, but I indicate it as an alternative if you are unable to load a CSS rule after your third party asset. (You may wish to log a bug with the 3rd party library because the !important annotation should be used sparingly and in this case probably not at all.)

Upvotes: 2

Related Questions