How to apply only one css file out of two css files included?


Tags: css,jqgrid

Problem :

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.



Solution :

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.


    CSS Howto..

    How to set CSS3 transition using javascript?

    How to make dropdown list unselectable?

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    How to apply a CSS class to another element when an object is hovered?

    How to make a CSS rule which applied on a div affect another div?

    How to vertical align element relative other element with pseudo-class? [duplicate]

    How to create rounded shapes with css or SVG

    CSS: how to make a DIV with display: table-celll extend 100% in width

    Where and how to add/edit css in roots starter theme

    How to control the expandability of textarea from width perspective

    Why does overflow hidden affect height and how can I fix it in this example?

    How to position a label using css relative to an absolute positioned input box

    How to use css3 transition on hover for td?

    How to display .entry-content CSS on Wordpress home page?

    How best to store and download resource files on the page?

    CSS floats - how do I keep them on one line?

    Single page wordpress template. How to create new section in css

    how would I have the image in this div with rollover not get the overlay?

    How to apply direction css attribute in list elements

    How to scroll left column when cursor is above right column?

    How to identify device to make separate css for iPad and Galaxy Tab?

    How to integrate many CSS files

    How can I remove the border around an image without a source?

    Fixing GoogleMonkeyR column width issue. How to change a script's CSS?

    HTML CSS - How to put button at the center of my page

    How to make an image appear over another image when mouse hovers with css3?

    How to set all CSS values to their default? [duplicate]

    How to manage multiple css files in rails 4?

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    How to make fading in background-color transition to bootstrap page using CSS?