PDA

View Full Version : CSS conflict - position:absolute in ExtJs Grid



abhilashca
4 May 2011, 9:26 PM
Hello,

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.:s

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;
}

The style position: absolute is causing the conflict. I'd tried CSS overriding but is not working as expected.:s

If you include the above style to any examples available in the ExtJs Examples page. The design will break!

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

Thanks

abhilashca
5 May 2011, 12:15 AM
Hello,

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.

Thanks

tryanDLS
5 May 2011, 7:03 AM
Are you really adding position:absolute generically to all divs in your CSS? If so, you need to qualify that otherwise you're going to break many things.

Also read http://sencha.com/learn/Ext_FAQ_Grid as it has a number of topics regarding grid css.

abhilashca
6 May 2011, 12:45 AM
Hello tryanDLS, thanks for the reply.

I have done a small workaround. I included a style (as below) in the ext-all.css. This fixed the layout and rendering issue. But, the font-size and font-family of the grid is ovrriden by the style for DIV in my original website. :|



div
{
position: relative;
}


Its temporary solution though, I'm looking for a better workaround for this.
Let me see, how far I can do that or how can I re-design my website.
Thanks for you help. :)

tryanDLS
6 May 2011, 7:04 AM
You should not be setting CSS properties at the generic DIV level. You need to use class names to qualify your CSS entries to avoid collisions. This is not an Ext issue - I suggest you find a book or web site to learn how CSS and cascading works.

abhilashca
6 May 2011, 8:10 AM
Hello tryanDLS,

I never mentioned this as an ExtJs. The problem is I'm integrating this to an exisiting website (pretty old one). So I cannot redesign my website just to add Ext components. Well, I'm playing with CSS overriding. Not sure, how far I can keep driving.

Thanks :)