I faced this the first time, when I was working on the File Browser add-on for the 2.x branch of my Take Control module for Drupal. Drupal’s core CSS is significantly incompatible with the ExtJs’ CSS, and considerably disorients the layout of widgets like MessageBox, Toolbars, or even GridPanel.
I did not realize this initially as I was working on the Take Control module, and discussed it on ExtJs forums here:
GridPanel not rending properly
It was only after the wonderful ExtJs community member Animal pointed this out that I looked for the possibility of CSS interference. Although that time, I managed a simple work-around to the issue by moving the entire File Browser add-on to an inline <iframe>.
However, the same issue hit me back while working on a custom module for IIT, Bombay. And this time, I could not deploy the workaround. I needed to place ExtJs components inline the page between other Drupal markup. I desperately tried ordering css files in the Head section in hope of getting the ExtJs css higher precendence, but nothing worked.
Having left with no other option, I had to completely dump all ExtJs components (including Ext.MessageBox), that were incompatible with Drupal css.
I have reported the issue at the official channels of both the frameworks here:
Make Drupal CSS compatible with ExtJs
Make ExtJs css compatible with Drupal
Let’s see if and when they (the framework owners) listen to us. Please get your voice counted at both forums by adding your comments to the above pages. Till this issue is genuinely resolved, we cannot hope of harness the complete power of ExtJs within Drupal…
Recent Comments