CSS conflict - position:absolute in ExtJs Grid

Recently I'd integrated ExtJs Grid into an existing webpage and resulted in a CSS conflict. I'd identified the conflicting CSS in my existing stylesheet. Unfortunately I cannot modify my current stylesheet since the entire website in built on top of that.

I have tried using the ctCls, baseCls, bodyCfg, bwrapCssClass and bodyCssClass, but didnt worked out as expected.

Below is the conflicting stylesheet of my existing website

div
{
font-weight: bold;
font-size: 12px;
visibility: visible;
font-family: Arial, sans-serif;
white-space: nowrap;
position: absolute;
}

开发者_StackOverflowThe style position: absolute is causing the conflict. I'd tried CSS overriding but is not working as expected.

Please note: setting the style position: relative to every DIV tag in the rendered grid can fix the issue. I have mocked up that using the IE Developer Toolbar.

Can someone help me how can I set that, for the rendered Grid, so that I can successfully override the position: absolute of the master page CSS style, with position: relative.

Does anyone has faced similar issue? Is it possible for me to override the CSS successfully? Any help will be appreciated.

Thanks

---

I don't think, that it's a good idea to set CSS styles in such a generic way on ALL <div>-elements on a page. But OK... You can try to override the settings using the following CSS rule:

.x-grid3,
.x-grid3 div {
    font-weight: normal;
    position: static;
}

---

I had the same problem with my web project and I've searched long time to find the solution. The problem is two elements are using the same Css in the same frame. So the best way to avoid the conflict is rendering your Grid Panel into another frame (always into the same page). You can use Managed IFrame user extension or uxmedia. I'm using uxmedia extension. To create an iFrame in uxmedia:

var htmlViewer = new Ext.ux.ManagedIFrame.Panel({  

    border  : false,

    title   : title,

    header: header,

    region:'center',

    iconCls : iconCls,

        // Here your Grid Panel comes within an url from server side
    defaultSrc : urlAddress
        });