冷融合数据栅格HTML布局中的消失内容

Question

我的CFM页面布局有问题。我正在布局一个CFM页面，在顶级div中包含3个组件，它们显示得很好。但是，当我在它下面设置一个新的div，并将一个Coldfusion数据集放在一个coldfusion表单标记中，然后测试它时，我的顶部元素就会消失。当我从div中移除< cfform >块时，它会恢复正常，并在只有文本包装的情况下显示得很好。帮助解决此格式化问题将不胜感激。我附上了一些图片来展示这个问题。

​

​

<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>

Answer 1

解决方案：我通过以下方法解决了这个问题：

1. 把我的CF布局块放在我的页面顶部，
2. 复制我的div与3个表单元素，并将它放回顶部。省省吧。
3. 删除botton处的复制div块。

代码：

<!---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>

似乎把cf布局放在顶部然后“强迫它与原来的div块向下，然后删除重复的div块使它正确呈现。