After integrating the ExtJs Grid into my existing webpage, I encountered a CSS conflict. The conflicting CSS was identified in my current stylesheet, but unfortunately I am unable to modify it as the entire website is built upon it.
Attempts with ctCls, baseCls, bodyCfg, bwrapCssClass, and bodyCssClass did not yield the expected results.
Below is the problematic section of CSS from the existing website:
div
{
font-weight: bold;
font-size: 12px;
visibility: visible;
font-family: Arial, sans-serif;
white-space: nowrap;
position: absolute;
}
The style property position: absolute is causing the conflict. Although I've attempted CSS overriding, it has not worked as intended.
Note that setting position: relative for every DIV tag in the rendered grid resolves the issue. I have successfully implemented this using the IE Developer Toolbar.
I am seeking assistance on how to apply this to the rendered Grid so that I can effectively override the master page CSS style's position: absolute with position: relative.
Has anyone else experienced a similar issue? Is there a way to successfully override the CSS? Any help would be greatly appreciated.
Thank you.