Stillnet Studios

I was creating a form the other day that had 3 form fields, layed out vertically on top of one another. I switched the first field to be a cfinput, so I could use the autosuggest feature:

Then I switched the other two fields to be cfinputs so I could add autosuggest to them, too. And that is where I ran into problems:

This happens in IE 6 and 7, but not FireFox. The problem occurs because when ColdFusion creates the <input> tag from a <cfinput>, it wraps it in two divs with a bit of related CSS. There is a conflict with the way ColdFusion sets the CSS float and z-index properties.

Thanks to my co-worker, CSS guru Jake Churchill, for figuring out a solution. All that needs to be done is to re-layer the inputs by setting their zindex. ColdFusion names the surrounding divs in an consistent way (thankfully they don’t use random names like some of the other ColdFusion JavaScript functions!), so we can just add a little CSS of our own to fix the problem. The divs end up named like myformfield1autosuggest, myformfield2autosuggest, etc. Knowing that, we can place this into our html page:

<style type="text/css">
	#field1autosuggest {
		z-index:3;
	}
	#field2autosuggest {
		z-index:2;
	}
	#test3autosuggest {
		z-index:1;
	}
</style>

Even better, here is a JavaScript script file you can reference in your page that will automatically fix these issues (thanks Jake!).

Download here

The script contents:

function fixAutoSuggest() {
	divs = document.getElementsByTagName("div");
	s = "<style type="text/css">\n";
	counter = 1;
	for (x = divs.length-1; x >= 0; x--) {
		if ( divs[x].getAttribute("id") && divs[x].getAttribute("id").indexOf("autosuggest") > -1) {
			s += "#"+divs[x].getAttribute("id")+" {z-index:"+(counter++)+"!important;}\n";
		}
	}
	s += "</style>";
	document.write(s);
};

You must then call this function after your form elements have been written to the browser. So - after your closing form tag, put this:

<script type="text/javascript">fixAutoSuggest();</script>

It does not work to simply call the function in the body’s onload attribute.

This entry was posted on Wednesday, January 30th, 2008 at 5:17 pm and is filed under Web Development, ColdFusion, AJAX / JavaScript.