CFLayout and IE weirdness
Well, I have used Internet Explorer for most of my professional career. Even years after FireFox came out I absolutely refused to switch browsers until fairly recently. Of course after I changed over to FF I could have slapped myself for not doing it sooner, but that is another story.
Recently I have been working on a new an improved viewer application for WhosOnCFC and WhosOnStats. Seeing the raw data is one thing, but I figured I would go ahead and package a nice looking viewer using some of ColdFusion 8's new AJAX features because they have a nice sleek look and most importantly, I have been wanting to learn it anyway.
I had the basic layout up and running fairly quickly. Ray was nice enough to get me through my initial problem of setting up a proxy for my application-scoped components which seems fairly obvious now.
Next, I had all my code working more or less. I viewed the results in FF, but when I loaded the same working application in IE the only thing I had was a blank screen. You could view the source and see that the code was there, it just was not rendered. I checked with Ray to see if he had ever ran into this problem and he suggested removing the DocType definition. I did that and still no go.
Then on to LiveDocs. Looking through some of the comments I noticed that if a width was not specified in the layoutarea's it would not be rendered. I went back through my code and got everything working correctly. In some attempt to keep someone else from trying to debug for hours, here is my modified code to work in IE. Please keep in mind it is still a work in copy. The style blocks marked in red are the modifications required to make it show up in IE.
<html>
<head>
<cfajaximport />
</head>
<body>
<cfajaxproxy bind="javascript:showInfo({myGrid.clientid})" />
<script language="javascript">
function showInfo(clientid){
ColdFusion.navigate('viewerdetail.cfm?clientid='+clientid,'mydiv');
}
refreshGrid=function(){
ColdFusion.Grid.refresh('myGrid',true);
}
setInterval(refreshGrid, 1000*60*60);
</script>
<cftry>
<cflayout name="outerlayout" type="vbox" style="width:100%; height:100%;">
<cflayoutarea style="height:100%; width:100%">
<cflayout name="thelayout" type="border" style="height:100%; width:100%">
<!--- The 100% height style ensures that the background color fills
the area. --->
<cflayoutarea title="Left layout area" position="left" closable="false" collapsible="false" name="left" splitter="true"
style="height:100%; width:300px;">
<cfform name="myForm">
<cfgrid format="html" name="myGrid" bind="cfc:viewer.whosonProxy.WhosOnline({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" pagesize="15" selectmode="browse" striperows="true" autowidth="true" >
<cfgridcolumn name="city" display="false" />
<cfgridcolumn name="clientid" header="ClientID" display="true" width="295" />
<cfgridcolumn name="coords" display="false" />
<cfgridcolumn name="created" display="false" />
<cfgridcolumn name="currentpage" display="false" />
<cfgridcolumn name="entrypage" display="false" />
<cfgridcolumn name="hostname" header="hostname" display="false"/>
<cfgridcolumn name="ip" display="false" />
<cfgridcolumn name="lastupdated" display="false" />
<cfgridcolumn name="pagecount" display="false" />
<cfgridcolumn name="pagehistory" display="false" />
<cfgridcolumn name="referer" display="false" />
<cfgridcolumn name="useragent" display="false" />
<cfgridcolumn name="userid" display="false" />
</cfgrid>
<cfinput type="button" name="btnRefresh" value="Refresh Now" onclick="javascript:refreshGrid();" />
</cfform>
</cflayoutarea>
<cflayoutarea position="center" style="background-color:##FFFFFF; height:100%; width:100%;">
<cfdiv id="mydiv"></cfdiv>
</cflayoutarea>
</cflayout>
</cflayoutarea>
</cflayout>
<cfcatch type="any">
<cfdump var="#cfcatch#" />
<cfabort />
</cfcatch>
</cftry>
</body>
</html>
What does adding the outer vbox cflayout element add? I was actually surprised you could put a cflayout inside another layout tag.
If you would like to see the overall results, you can view my WhosOnCFC demo site which may be found at http://amary.kisdigital.com/ . This is my development copy with all the available features enabled. It should be noted that it *WILL NOT* hide your IP address so if you are concerned about having that shown to the general public you may want to skip it.