道场内容短暂出现然后消失

Question

我有一个简单的页面，它应该显示一个带有顶部、底部和中心区域的边框容器。当您运行它时，内容会短暂出现然后消失。 Firebug 没有显示任何错误，我看不出代码有任何问题。

谢谢。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
 <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
 <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
    <script src="http://js.arcgis.com/3.13/"></script>    
    
    <script >
    var dojoConfig = {       
        parseOnLoad: true
    }
    
    require(
 ['dijit/layout/BorderContainer', 'dijit/layout/ContentPane',
 "dojo/parser", 
 "dojo/domReady!" ],  
 function(BorderContainer, ContentPane, parser) { 
  parser.parse();
 });
    
    </script>                      
    </head>

    <body class="claro" style="font-family: Verdana; font-size: 11px;">            
 <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-  props="design:'headline',gutters:false" style="width:100%; height:100%;">          
     <div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'top'">
      top
     </div>

     <div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'bottom'">
      bottom
     </div>
     
     <div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'center'">
      center
     </div>     
   </div>          
    </body>


</html>

Answer 1

如下图所示-

我们能够看到 contentPane，但它显示内容错误：

所以我想这种奇怪的行为可能是由于这些窗格的内容而发生的。

尝试在其中添加内容，看看您是否遇到相同的错误或在您的环境中得到修复。

Answer 2

我做了更多的研究。修复“data-dojo- props”中不需要的空格并替换为“data-dojo-props”后，会出现与您在问题中描述的相同的行为。

实际上，这看起来像是尺码问题。

边框容器将采用其父容器的大小。但是，如果它无法获取它。它的大小将是 0，因此一切都消失了。

您首先看到的是内容，因为边框容器尚未加载。一加载，内容就没了。

在下面的代码片段中，我通过 150px

强制 borderContainer 的父级（本例中的 body 标签）的大小为 300px

你可以看到内容保留了。

（注意：我还更改了 data-dojo-type 以使用斜线表示法。点表示法适用于旧的 dojo 版本。

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
 <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
 <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
    <script src="http://js.arcgis.com/3.13/"></script>    
    
    <script >
    var dojoConfig = {       
        parseOnLoad: true
    }
    
    require(
 ['dijit/layout/BorderContainer', 'dijit/layout/ContentPane',
 "dojo/parser", 
 "dojo/domReady!" ],  
 function(BorderContainer, ContentPane, parser) { 
  parser.parse();
 });
    
    </script>                      
    </head>

    <body class="claro" style="width:300px; height:150px" style="font-family: Verdana; font-size: 11px;">            
 <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">          
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      top
     </div>

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
      bottom
     </div>
     
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      center
     </div>     
   </div>          
    </body>


</html>

道场内容短暂出现然后消失

dojo contents appear briefly and then they disappear

dojo