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 create a code block on website

    CSS 2 Sass: How do I change the output format of the generated SCSS?

    Html, CSS - How to create a donut chart like this?

    How to manage custom CSS?

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    How to have div fill width and height of browser window and not have the image be streched

    how to make jquery transition smoothly

    How do I get a CSS class to show up in my javascript with my previous method?

    how to add class to razor form and give padding?

    How to create a DIV style switcher in JavaScript?

    How do you group similar n-th child selectors? [duplicate]

    How to design WPF in HTML, CSS and JavaScript

    How to change css for an element but keep defaults for it's children

    How to pass a css % parameter in javascript/jquery

    How to make CSS button appear transparent

    How do I align an inner div with the bottom of an outer div?

    How to prevent the button from submission the form after sending it?

    Slideshow with specific Text on each Image

    CSS - EM Values Inconsistent, How To Debug / Explanation

    How to hide overflow characters of a div when resizing [duplicate]

    How to change CSS attribute value based on querystring using jQuery

    How to make text svg-animation launch when visible?

    how to use text-indent only with element not ont it's :before Selector?

    How to make the green DIV fit right after 2 upper divs?

    How to set bold only to first level list elements? [duplicate]

    How do I stop the text from moving when hovered? (background-image is involved)

    css hover : aligning on bottom: how to align on top?

    How to make hidden div slide down without affecting other elements in same row

    How do I change the colours of multiple buttons, each into different ones when hovered?

    How do I install and use Groundwork CSS