How avoid zurb founction styles from overriding jqgrid/jquery ui styles?


Tags: css,jqgrid,zurb-foundation

Problem :

I'm using Foundation CSS framework and jqGrid to display data, but Foundation styles are messing with jqGrid/jquery UI styles...

I've tried a lot of changes and search, but I can't figure out how to do it...

Here is an example : http://jsbin.com/cocukube/1/ I would like the jqGrid to be displayed like that : http://jsbin.com/cocukube/2/ But of course, with all Foundation styles...

Thank you very much.



Solution :

I would begin by taking a look at the order in which you're loading the CSS. In order to assure that Foundation is not overriding your jqGrid styles, make sure that jqGrid is being loaded after Foundation.

<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="jqgrid.css">

If that's not the issue, you might need to create an override.css file to essentially "undo" some of the styles that Foundation is applying. If this is necessary, make sure that your override.css file is called after the other two.


    CSS Howto..

    How to arrange divs by css floats?

    How to get all CSS of element

    How to select a td by position of its relative th?

    How to style an anchor tag to look like a button with the same height as the button?

    How do I put my index.html in the same folder as my other .html files on github?

    how to make jquery transition smoothly

    How to position a div under a link on click?

    How to make all cross browser compatible skewed div edges?

    How to change the scrolling text in CSS or JQuery

    How to keep “text-decoration: underline” from breaking while applying some positioning to the child ?

    How not to display / filter out special characters? (CSS or Javascript)

    How to replace a text-align: -webkit-center?

    How to import a CSS file from an external bundle resource

    css: column-count property - how to modify it with css to modify the number of items in each column?

    Element width based on how many siblings are present

    How to break a line after some certain width in css

    How do I create triangle shaped vertical breadcrumbs

    How to center align a glyphicon to the middle of the page at all screen sizes

    How can I split a text in 2 color vertically?

    How to make the width of a div in the middle responsive

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How can i have a background image and lighting that are crossed with lines drawn on it in CSS [closed]

    How to create an overlay to be used under a pop up

    How to vertically align inline-block divs without vertical spaces using CSS?

    How to create a card flip effect on DIV using javascript

    How can I do this: text inside rectangle using HTML/CSS?

    How to prevent a div element to be affected by the box-shadow of another div element?

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to make a button that can change background color of a doucment?