Question

当我尝试调整bordercontainer的大小以允许在点击搜索按钮时显示隐藏的div时，我正在尝试完成我的应用并遇到一些HTML / CSS问题

以下是我的应用初始加载时的简单说明： enter image description here

这就是我希望应用程序在点击搜索按钮后查看的方式：

enter image description here

以前我使用以下代码来调整中心窗格的大小：

dojo.style(dijit.byId("map"), "height", "83%");

这已不再适用。

我的HTML是：

    </script> 
  </head>
  <body class="claro"> 
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:55px;margin:0;">
<!--Header Logo-->
                <div id="headerlogo" 
                            < a href="http://www.marioncountyfl.org/InformationSystems/IS_GIS.aspx"><img src="images/map1.png" alt="View Logo" /></a> 
                </div>
<!--Header-->
                    <header>Zoning Classifications</header> <div style="position:absolute; right:160px; top:10px;  z-Index:99;"></div>
        </div>
<!--Help Button-->
                <div id="help" title="Help";> 
                            <a href="help.html"><img src="images/Help1.png" alt="Help" style="border:none" /></a> 
                </div>
<!--Basemap Gallery-->      
                <div id="subheader" style="position:absolute; right:60px; top:10px; z-Index:98;">
                            <div id="basemapbutton">
                                        <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">    
                                                <img src="images/imgBaseMap.png"/>     
                                                        <script type="dojo/method" event="onClick">   
                                                            toggler[(dojo.style("basemaptoggle","display") == "none") ? 'show':'hide']();
                                                        </script>
                                        </button>   
                                                    <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
                                                        <div id="basemapGallery">
                                                        </div>
                                                    </div>
                            </div>
<!--Search-->
                    <div id="search" >
                            Parcel ID: <input type="text" id="parcel" size="20" value="4209-111-074" />
                                        <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ doFind();}, value:"Search"'">
                                            Search
                                        </button>
                    </div>
                </div>
<!--TOC-->
        <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 95%;">
                            <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
                                    <div id="tocDiv">
                                    </div>         
                            </div>
<!--Map-->
                        <div id="map" dojotype="dijit.layout.BorderContainer" region="center" style="height:100%; doLayout:'false'">
                                <div class="watermark">
                                        <a href="http://www.marioncountyfl.org/InformationSystems/IS_GIS.aspx"><img src="images/MCLogo.png" alt="View Logo" style="border:none" /></a>
                                </div>  
                                <!--Data Grid-->
                                <div id ="datagrid" data-dojo-type="dijit.layout.ContentPane"  splitter="true" region="bottom" style="width:100%; height:125px;">
                                        <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
                                            <thead>
                                                <tr>
                                                    <th field="Parcel Identification Number" width="10%">
                            Parcel ID
                                                    </th>
                                                    <th field="Assessing Neighbornood Code" width ="20%">
                            Neighborhood Code
                                                    </th>
                                                    <th field="Property Class Code" width="10%">
                            Property Class
                                                    </th>
                                                    <th field="Site Address" width="57%">
                            Address
                                                    </th>
                                                    <th field" width="2%"> <div class="GridCloseIcon" title="Close Grid" onclick="esri.hide(datagrid)"></div>
                                                    </th>                   
                                                </tr>
                                            </thead>
                                        </table>
                                </div>
                        </div>
        </div>
<!--Splash Screen-->
            <div id="dialogLoadMessage" dojotype="dijit.Dialog" style="width: 350px;">
            <table>
                <tr>
                   <td>
                      <div id="divLoadMessage" style="text-align:center">
                      </div>
                   </td>
                </tr>
                <tr>
                   <td align="center">
                      <div class="divOk" onclick="dijit.byId('dialogLoadMessage').hide();">
                                                OK
                                            </div>
                   </td>
                </tr>
            </table>
      </div>
    </body> 
</html>

任何帮助将不胜感激。

Answer 1

通过在其父内容 ContentPane上调用addChild()和removeChild()来添加或删除 datagrid BorderContainer。< / p>

查看实际操作：http://jsfiddle.net/phusick/7WRSh/

Answer 2

如果使用box-sizing: border-box添加并切换底部网格的填充 - 而不是调整中心窗格的大小。使用js添加和删除填充，填充应反映bottom grid处于活动状态时的高度，并且当0px处于非活动状态时可能会postion: absolute。如果中心窗格内容包含height: 100%和box-sizing:border-box，则应该可以轻松进行缩放。我已广泛使用该方法对大规模应用程序有很大影响，它也是跨浏览器兼容的，但如果你需要支持IE的旧版本，请确保使用box-sizing polyfill ton强制执行盒子模型。

有关{{1}} http://paulirish.com/2012/box-sizing-border-box-ftw/

的更多信息

在onClick上调整BorderContainer的大小

2 个答案: