Wednesday, November 26, 2008

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:


Danny Moody said...

Thanks Mark for this post. It was the gem I needed to fix my issue.

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards