htmlcsscoldfusioncoldfusion-9
Disappearing content in HTML Layout of Coldfusion Datagrid
I'm having an issue with my CFM page layout. I'm laying out a CFM page with 3 components in the top level div and they are displaying nicely. However when I set a new div below it and place a Coldfusion datagrid in a coldfusion form tag then test it, my top element disappears. When I remove the < cfform > block from my div it goes back to normal and displays fine with just texted wrapped in a . Help resolving this formatting issue would be greatly appreciated. I've attached images to show the issue.
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"><!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%">
<cfselect name="employee" query="getReports"
value="Report_Name" display="Report_Name" required="yes" size="10">
</cfselect>
</cfform>
</div>
</div>
**Code In Question**
<!---DataGrid Control Pane--->
<div id="right_div" style="position: relative; width: 100%; background-color:#CCC; float: left;">
<cflayout type="tab" tabheight="100" name="controlTabs" width="900" height="600"> <!---Tabbed layout controller for all tabbed layout components --->
<cflayoutarea name="tab1" title="Employee Report Assignments" align="center">
<cfform height="600" width="900">
<cfgrid
name="AssignedReports"
align="Top"
autoWidth="yes"
bgColor="FFF"
colHeaderBold="yes"
format="html"
gridDataAlign="left"
gridLines="yes"
query="qEmployeeAssignments"
sort="yes"
stripeRowColor="FC6"
stripeRows="yes"
width="900" height="500">
<cfgridcolumn name="Full_Name" header="Employee Name" display="yes" width="300" />
<cfgridcolumn name="reportName" header="Report Name" hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
</div>
Solution
Solution: I was able to fix this issue by the following:
- Place my CF layout block at the top of my page,
- Copy my div with the 3 form elements and put it back at the top. Save it.
- Delete the duplic div block at the botton.
Code:
<!---This begins the visual component layout--->
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Report List Form Initialization--->
<cfselect name="employee" query="getReports" <!---CFSELECT To populate form element from above Get Report query--->
value="Report_Name" display="Report_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Get Report query--->
</cfselect>
</cfform>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<!---Tabbed layout controller for all tabbed layout components --->
<cflayout type="tab" tabheight="100" name="mytabs"> <!---Initialization for tab navigation layout--->
<cflayoutarea title="Employee Perspective" name="t1"> <!---First Tab navigation pane initialization--->
<cfform> <!---CF form initialization --->
<cfgrid <!---CF datagrid initialization--->
name="AssignedEmployees" <!--- -------Attributes---------- --->
align="Top" <!--- | --->
autoWidth="yes" <!--- | --->
bgColor="FFF" <!--- | --->
colHeaderBold="yes" <!--- | --->
format="html" <!--- | --->
gridDataAlign="left" <!--- | --->
gridLines="yes" <!--- | --->
query="qEmployeeAssignments" <!--- | --->
sort="yes" <!--- | --->
stripeRowColor="FC6" <!--- | --->
stripeRows="yes" <!--- | --->
width="900" height="500"> <!--- End of Attributes --->
<cfgridcolumn name="Full_Name" header="Employee Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
display="yes" width="300" />
<cfgridcolumn name="reportName" header="Report Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" <!---Datagrid column. Mapped to the First and Last Names in the query--->
dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
<cflayoutarea title="Reporting Perspective" name="t2"> <!---First Tab navigation pane initialization--->
<cfform> <!---CF form initialization --->
<cfgrid <!---CF datagrid initialization--->
name="ReportsToEmployees" <!--- -------Attributes---------- --->
align="Top" <!--- | --->
autoWidth="yes" <!--- | --->
bgColor="FFF" <!--- | --->
colHeaderBold="yes" <!--- | --->
format="html" <!--- | --->
gridDataAlign="left" <!--- | --->
gridLines="yes" <!--- | --->
query="qEmployeeAssignments" <!--- | --->
sort="yes" <!--- | --->
stripeRowColor="FC6" <!--- | --->
stripeRows="yes" <!--- | --->
width="900" height="500"> <!--- End of Attributes --->
<cfgridcolumn name="reportName" header="Report Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
hrefKey="videogameid" target="_blank" width="300" />
<cfgridcolumn name="Full_Name" header="Employee Name" <!---Datagrid column. Mapped to the First and Last Names in the query--->
display="yes" width="300" />
<cfgridcolumn name="reportDescrip" header="Report Description" <!---Datagrid column. Mapped to the First and Last Names in the query--->
dataalign="center" type="date" width="300" />
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
**Delete this block after saving, then save again. Layout then works**
<!---This begins the visual component layout--->
<div id="entire-page-div" style="position: relative; overflow: hidden;">
<div id="left_module" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<label for="reportsList">Available Employees:</label> <!---This is the available employees list. Returns employees not assigned to a report--->
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Form Initialization--->
<cfselect name="employee" query="getAvailableEmployees" <!---CFSELECT To populate form element from above Available Employee query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Available Employee query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="center_div" style="position: relative; width: 34%; background-color:#CCC; float: left;">
<!---Assigned Employees Module--->
<label for="reportsList">Assigned Employees:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Assigned Employee Form Initialization--->
<cfselect name="employee" query="getAssignedEmployees" <!---CFSELECT To populate form element from above Employee Assignment query --->
value="Full_Name" display="Full_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Employee Assignment query --->
</cfselect>
</cfform>
</div>
<!--- ---->
<!--- ---->
<!--- ---->
<div id="right_div" style="position: relative; width: 33%; background-color:#CCC; float: left;">
<!---Report List Module --->
<label for="reportsList">Reports List:</label>
<cfform name="assignedEmployees" action="getReport.cfm" width="25%"> <!---Report List Form Initialization--->
<cfselect name="employee" query="getReports" <!---CFSELECT To populate form element from above Get Report query--->
value="Report_Name" display="Report_Name" required="yes" size="10"> <!---CFSELECT To populate form element from above Get Report query--->
</cfselect>
</cfform>
</div>
</div>
It seems that putting the cf layout on top then "forcing it down with the original div block, and subsequently deleting the duplicate div block causes it to render properly.