How to make jQuery UI's style not overwrite jqGrid's style?

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

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.