autosuggest in cfwindow in IE7

Report · Jan 29, 2009

I'm seeing strange behavior in IE7 (it works fine in FF3) when an autosuggest is used inside a cfwindow. If the cfwindow content is long, and therefore the cfwindow has scrollbars, when you scroll the content the autosuggest floats along down the page rather than scrolling out of view.

Here's very simple code to reproduce it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autosuggest in CFWindow Demo</title>
</head>

<body>
<cfwindow name="FormWindow" height="200" width="500" initshow="true">
<cfform>
<cfinput name="FirstName" autosuggest="Tim,John,Karen,Connor,Trish" id="FirstName" size="30" maxlength="30" autosuggestminlength="1" maxresultsdisplayed="20" value="" /><br /><br />
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
<div>Junk to make it scroll</div>
</cfform>
</cfwindow>
</body>
</html>

Stranger still is that if you remove the DOCTYPE declaration and xmlns from the <html> tag (putting IE7 into quirks mode I suppose), it works correctly. I just wish I knew why. Anyone have any ideas?

Thanks,
Russ

Report · Jan 29, 2009

This is tricky. It's obviously a CSS issue to do with positioning...something which Internet Explorer has never QUITE got right.

I found that if you add this to the top of your page:

<style media="screen" type="text/css">
#FirstNameautosuggest { position: static!important; }
</style>

It will fix the issue with the text box itself...but on the other hand, it seems to mess with the auto-suggest drop-down itself a little bit. I guess the solution to this would be best found in debugging exactly what CSS is being applied to what elements.

This is a tricky thing to solve because much of the HTML is generated by script and that has CSS applied to it - so it's tricky to grab the HTML to see what's happening.

My BEST advice is to download Firebug for Mozilla Firefox. You can inspect the CSS currently being applied to certain elements...that's how I got THIS far. But it IS tricky...and certainly when CF adds on about a million CSS and JS files. What a nightmare this CF UI stuff really is. It's nice in play, but rough and hacky in practice.

There's another problem though; this being the fact that IE STILL...after many years of requests, does not have a decent CSS / HTML debugger like Firebug. Roll on the day when this happens.

Good luck.
Mikey

Report · Jan 30, 2009

Thanks!

Building on what you said, I found that if I just add another line of css, the autosuggest drop-down can be repositioned where it needs to be:

#FirstNamecontainer { top:30px!important; left:10px!important; }

Report · Aug 27, 2010

Hi I too have a problem with scrollbars and auto suggest in a cfwindow.. But my problem lies with the scrollbars within the autosuggest list..I'd be grateful for any pointers..

My auto suggest list returns a long list and i'd like the user to be able to scroll the list. The mouse roller scrolls perfectly,but if I want to scroll using the vertical scroll bar (as many of our users dont have scroll mice) it just disappears.

I have tried to override the CSS by including the following attribute below but it doesnt work.I have tried various CSS tricks (like wrapping in another DIV and changing position values) to no avail.Please help!

Here is my entire CSS related to the autosuggest:

input.autosuggestinput

{

z-index:0;

font-weight: normal;

font-family:verdana;

font-size:10px;

width: 170px;

}

.autosuggest, .autosuggest div

{

font-weight:bold;

font-family:verdana;

}

div.autosuggestcontainer li.yui-ac-highlight

{

background-color:white;

}

div.autosuggestcontainer li

{

padding:2px;

width:100%;

cursor:pointer;

white-space:nowrap;

margin:0;

border-bottom-style:solid;

border-bottom-width:1px;

border-bottom-color:#e2e2e2;

}

div.autosuggestcontainer li.yui-ac-prehighlight

{

background:#ffd2a6;

}

div.autosuggest

{

overflow:scroll;

position:relative;

float:left;

height: 300px;

}

.autosuggestcontainer {

height:400px;

overflow:auto;

position:relative;

float:left;

}