0

アプリを完成させようとしていますが、ボーダーコンテナのサイズを変更して、検索ボタンのクリック時に非表示の div を表示できるようにしようとすると、HTML/CSS の問題が発生します。

以下は、初期ロード時の私のアプリの簡単な図です。 ここに画像の説明を入力

これは、検索ボタンがクリックされた後にアプリがどのように見えるかです。

ここに画像の説明を入力

以前は、次のコードを使用して中央のペインのサイズを変更していました。

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>

どんな助けでも大歓迎です。

4

2 に答える 2

2

contentを呼び出して、データグリッド を追加または削除します。ContentPaneaddChild()removeChild() BorderContainer

実際に見てみましょう: http://jsfiddle.net/phusick/7WRSh/

于 2012-12-21T19:59:07.287 に答える
0

box-sizing: border-box中央のペインのサイズを変更する代わりに、を使用して下部グリッドのパディングを追加および切り替える場合。jsパディングを追加および削除するために使用します。これは、アクティブなときと非bottom gridアクティブなときの高さを反映する必要があり0pxます。中央のペインのコンテンツにがあり、postion: absoluteスケーリングheight: 100%が簡単になるはずの場合。私はこの方法を広範囲に使用して大規模なアプリケーションに大きな影響を与えました。クロスブラウザ互換でもありますが、IEのレガシーバージョンをサポートする必要がある場合は、必ずbox-sizing:border-boxポリフィルトンを使用してボックスモデルを適用してください。

詳細については、box-sizing http://paulirish.com/2012/box-sizing-border-box-ftw/をご覧ください。

于 2012-12-21T19:04:31.400 に答える