Using ExtJS Calendar and CSS issues

Mack McLendon emailed me with an issue he was having with the ExtJS calendar in Apex. He had successfully got the date functionality working, but as you can see from the screenshot he sent, the calendar is offset to the right. Mack wrote further, that disabling the standard Apex CSS and javascript fixed the problem, but at the expense of everything else on the page. Luckily I was able to answer this easily - having been through the same painful experience myself.  

The Solution
The issue is caused by the following ul margin rule in apex_3_1.css

ul { margin:0 0 0 15px; padding:0;}

The solution is simple - make sure you reference the ext stylesheet after the apex stylesheet (#HEAD# tag) in your page template.

Ext includes some "reset" styles to ensure uniform appearance between different browsers, including the following rule:
ul {margin:0;padding:0;}

Because the ext stylesheet comes after the apex stylesheet, the apex style will be overridden, and the calendar appear correctly. Related info:

• Building a complete Oracle Apex page template using ExtJS
• Implementing Ext Dates in Oracle Apex
• Dates demo
• CSS Frameworks + CSS Reset: Design From Scratch