Question

I am currently using Twitter Bootstrap in developing an web app. Now I also need to use jqgrid for the same app. So, I have a couple of CSS included for a page.

<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/flick/jquery-ui-1.8.19.custom.css" rel="stylesheet">
<link href="../css/ui.jqgrid.css" rel="stylesheet">

However, the grid table generated by jqgrid on the page looks a bit odd since you find Twitter-ish cells in the jgrid table.

So I am wondering if there are any ways to disable one CSS out of several CSS files that I include for a certain element of the page? This time, I want to disable bootstrap css for div tag with id=grid where the grid will show up.

Answer 1

Pretty vague, but here’s your solution: use the dev tools in your browser of choice, but i’m going to explain using Chrome:

• hover over the affected jqgrid table and click inspect element. dev tools will open up and you should see all the styles being declared on that element, from the separate stylesheets.
• if you see any styles crossed out (being overridden) that come from jqgrid, you need to out specify them in your jqgrid style sheet, for example, by adding a class, id, parent selectors or chaining.
• also, if there are styles bootstrap is declaring that jqgrid doesn’t address (these you’re going to have to sift through manually), the same solution applies: add these styles to jqgrid, while specifying the styles you desire and adding specificity to your declarations so they override bootstrap.

If you posted a link, i could show you, which i think would be much easier then this explanation. but this will achieve the style(s) you desire.