cfwindow css bug workaround

Last week I posted about a bug I found in the ColdFusion 9 Ajax. In particular it referred to some display errors that were introduced by usage of cfwindow, cflayout-border, or (possibly) other Ajax containers. After a bit of head scratching and testing today, I have found a workaround. The workaround is kind of hackish, and doesn't work will with the CF rich text editor, but it is a start.

The Problem
Research and testing has shown that the problem was caused by the ext-all.css file. When you use or import cfwindow or cflayout-border on your page, ColdFusion automatically adds a few css and ajax files into your page's output HTML. One of these css files, ext-all.css, appears to be causing the problem.

If you open ext-all.css, you will find the following towards the very beginning of the file (emphasis and whitespace added for easier viewing):

html, body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0; padding:0;}

This line appears to be causing the table padding problems.

Two lines farther down the file, you will find this:

address, caption, cite, code, dfn, em, strong, th, var {font-style:normal; font-weight:normal;}

This line appears to be causing text surrounded by <em> and <strong> tags to display as plain text.

The Workaround
The workaround is simple. In CSS, which ever style declaration comes last, wins. So, simply add the following to the bottom of your page:

<style>
strong { font-weight:bold; }
em { font-style:italic; }
em.strong {font-weight:bold;}
strong.em {font-style:italic;}
</style>

Line 1 is a style open tag.
Line 2 modifies the strong tag back to bold.
Line 3 modifies the em tag back to italics.
Line 6 closes the style tag.

So what are lines 4 and 5 for? Simple. Lines 2 and 3 of the workaround cause text to render bold or italics, but not both. So, Line 4 allows you to modify an em tag to be both italics and bold. Line 5 does the same in reverse.

A Simpler Workaround
Incidentally, you probably noticed that there is a simpler (though more extreme) workaround. You could just remove td, th, strong, and em from the offending lines of ext-all.css . If you are going to do this, however, you probably want to backup your copy of ext-all.css first; how this will affect the ajax controls and/or pages that use them is unknown.

Why Bother? Who cares? Why not just use inline styles? Who uses strong or em tags anymore anyway?
Good question. The answer is: Adobe, or, more importantly, their products. ColdFusion has the slick CKEditor (formerly called FCKEditor) built into it. CKEditor uses strong and em tags to modify text. This means that any content that you generate using the CKEditor (e.g. in a homegrown CMS), will be rendered plain text by ext-all.css. This is a problem.

Also, when coding with DreamWeaver, if you hit Ctrl-b for bold, or Ctrl-i for italics, DreamWeaver is going to insert em and strong tags to enforce the bold & italics. If ext-all.css renders that text plain, you now have a lot of pages on your site unexpectedly showing up with a lot of plain text, and unpadded table cells. This is an even bigger problem.

Please Vote
Workaround notwithstanding, if you think that this bug is as big of a problem as I do, please vote for Adobe to fix it here:

http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=80530

Also, you may like to vote to have Adobe fix a related bug here:

http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=80421

Thanks for your votes. I am looking forward to seeing Adobe fix this problem.

CF 9 Ajax breaks site CSS and formatting

Thesis
JavaScript/CSS includes for cfwindow, cflayout-border (and possibly others), kill some formatting elements, such as <strong> & <em> tags, and negatively affects table display such as padding / margins. This is a problem.

The details
Consider the following simple cfm page:

<p>Not Bold</p>
<p><em><strong>Bold and italics</strong></em></p>

Not unexpectedly, the above displays one line of plain text, and one line of formatted text. The above works in both CF8 and CF9, and looks something like this:

Not Bold
Bold and italics

Now we try importing the javascript & css for cfwindow. Consider the following small but important change:

<cfajaximport tags="cfwindow" />
<p>Not Bold</p><br>
<p><em><strong>Bold and italics</strong></em></p>

In the above, the formatting for the page breaks. All you get is plain text on both lines, something like this:

Not Bold
Bold and italics

The "strongs" and "ems" are completely ignored. Some testing has shown that this also happens when you import "cflayout-border". Worse, it also seems to goof-up table formatting and padding. Oh, and the same problem occurs when using the <cfwindow> tag directly, instead of just importing the cfwindow ajax and creating thru JavaScript.

Although I don't really use strong or em tags anymore, this will break a lot of legacy pages. Also, since the CKEditor included with ColdFusion uses <strong> and <em> tags instead of inline styles, any pages that use content generated by CKEditor will stop showing formatted text. This is a problem if you have implemented a homebrew CMS (as we have on a few pages).

I'll post a fix/workaround if I find one.

Notes
I am hesitant to post about this; last time I publicized what I thought was a bug in ColdFusion it turned out that I was just an idiot, and was doing something wrong (duh). So, on the one hand I hope that I am just an idiot (again), and that there is a simple workaround for this. Unfortunately I fear that I may have found a legitimate bug this time, and it complicates our plans (already in progress) to move to CF 9.

If this is a legitimate bug, I am surprised that something like this could have made it into final release code. It is easy to reproduce, and is immediately apparent in both FireFox and IE. I have read thru the CF 9 release notes, and performed an hour of two of testing, and haven't found any obvious workarounds. If you have an idea, please let me know. Otherwise, I think that we are going to have to look at waiting to upgrade to CF 9 for a little while. Bummer.

ColdFusion 9 ORM One to Many Complete Example

Manjukiran (don't know last name) has posted a great example of how to set up a One To Many relationship using ColdFusion 9 ORM. It demonstrates all of the moving parts in one place, including both cfcs involved in the relationship, and a cfm page that manipulates data in both tables, using the cfc & hibernate.

You can find the post here:
http://www.manjukiran.net/2009/07/15/coldfusion-orm-define-one-to-many-and-many-to-one-relationships/comment-page-1/#comment-2551

Thanks Manju!

Getting cffile to work in a cfwindow

Figured out how to do a file upload in a cfwindow using cfform. If you try to receive a file upload in a cfwindow, regardless of the enctype specified in the cfform it will incorrectly receive the form as of type "application/x-www-form-urlencoded", instead of the more-better "multipart/form-data. My guess is that this has something to do with the ajax used to submit the form. This error happens even if the originating form is in the cfwindow.

Easy work around? Embed an iframe in the cfwindow, put your form in the iframe, and have the form submit within the iframe using a simple submit button (rather than using ColdFusion.navigate). If you submit the form using a submit button in an iframe, the form's enctype will submit properly, and ColdFusion will correctly receive your file and pass it onto cffile.

This technique will also work with putting a cfpresentation tag in a cfwindow.