How to make jQuery UI's style not overwrite jq

Question

Here is my situation, I'm having a jquery ui dialog with a jqgrid inside of it. When I opened the dialog, I can see that the grid's style has been overwritten by the dialog's style.

Is it possible to make the content of a dialog uncontaminated by the dialog's style?

I'm very sorry if the question has been asked before. Please do give me links to the threads if you be so kind.

I have made a jsfiddle here

http://jsfiddle.net/TGGKh/

Please any response would be appreciated

PS. Oh yes iframes does come to mind to overcome the style overwriting, but I dismissed the idea

Answer 1

Remove the following line ".ui-widget .ui-widget { font-size: 1em; }" from jquery-ui.css file.

Answer 2

Before you create more complex solution probably this simple CSS

html, body { font-size: 75%; }

will be already the workaround. The problem is that jqGrid CSS use em (relative font size) and jqGrid use absolute values in pixel. To use the same font size on the whole page you can use above CSS.