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 center my images in my case?

    How to get value of input using Jquery and put it in css of an element

    How to avoid universal Rule CSS Asterisk(*)?

    How to build bootstrap version 4 so that the CSS only contains specific parts, such as grid?

    How do I format code neatly in HTML/CSS ? I especially want to use the numerical circle callouts, with Python Docutils if I can

    How can I create a bold/“cursor” border around a table cell?

    how to make text with quotations justify? [closed]

    How to move object into the screen from outside via jQuery transition

    How to do margin: 0 auto 0 auto minus a few pixels with CSS?

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How to style a table-like div with css? How to fill a “column”?

    how to crop big image in bootstrap carousel

    How to prioritize a CSS class?

    how can I set my gradient background in css for full width and height of the page?

    How to set display none on tag using css?

    How can I set the Eclipse JS to edit a file as CSS

    CSS: How do I make a !100% header with a repeat-x background and tip

    How to assign a unique CSS id to each cell in a jqGrid?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to position SVG with CSS?

    How to create a lightbox like this [closed]

    Hide/Show Content at Specific Scroll Positions

    How can I get this css to display correctly in Chrome?

    How can I make each section fit within the li box?

    css div and span display differently in browsers. How to unify?

    how to save the datas which are get from a newsletter? [closed]

    how to make a div transparent without affecting the child in CSS 3?

    How to change a defined value to a unspecified value by css?

    how to prevent child element from widening parent element's width in css

    How can i setup my php code to change my CSS background picture daily [closed]