AnsweredAssumed Answered

HTML not filling screen and grid not displaying correctly

Question asked by thek04 on Sep 25, 2013
Latest reply on Sep 26, 2013 by thek04
My website is not filling the screen. My CSS sets the html and body to a height of 100%. On top of that my dojo grid is not displaying with the correct CSS. Anyone have any ideas on why either of those don't display correctly?

[HTML]
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <title>Text Search</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <script>
        var dojoConfig = {
            parseOnLoad:true
        };
    </script>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script src="Scripts/App2.js"></script>
    <script>
        dojo.require("dojox.grid.DataGrid");
    </script>



    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/tundraGrid.css">
    <link rel="stylesheet" href="Styles/Base.css">


    <style>
    </style>

</head>
<body class="tundra">


<div id="titleBar">
<div id="titleText" class="mapMenus">
    <a href='http://azogcc.az.gov/'>ARIZONA OIL AND GAS <br>CONSERVATION COMMISSION</a>
</div>

<div id="navigationMenu" class="mapMenus">
    <ul>
        <li><a href='http://azogcc.az.gov/'>Home</a></li>
        <li><a href='http://azgs.az.gov/'>AZGS</a></li>
        <li><a href='http://welldata.azogcc.az.gov/index.html'>Map Search</a></li>
        <li><a href='http://welldata.azogcc.az.gov/PyCh_index.html'>Text Search</a></li>
    </ul>
</div>
    <div id="titleImg" class="mapMenus">
        <a href='http://azgs.az.gov/'><img src="photos/AZ_state_seal2.png" height="49" width="49"></a>
    </div>
</div>

<div id="search_info"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'top'">
        <p>
            <span id="TextSearch"><strong>Text Search:</strong></span> Complete one or multiple fields and press the Submit Search button to search for wells based on their attributes. Selecting LAS data will open the LAS data in a text file. The selected LAS data can be saved and downloaded by using the save page as function.
        </p>
    </div>



<div id="search_body"
        data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:false"
     style="width: 100%; height: 100%; margin: 0;">

<div id="image_box"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'right'">
    <image src="photos/Arizona_Meridians_Labled.jpg" height="385" width="350">
        <div id="img_info">
            <p>Map of Arizona State Meridians</p>
        </div>
        </image>
</div>


<div id="forum"
     data-dojo-type="dijit/layout/ContentPane"
     data-dojo-props="region:'left'">
<form action="">
    <table>
        <tr>
            <td class="label">
                <label for="apinum">API Number</label>
            </td>
            <td>
                <input type="text" name="apino" id="apinum" size="14" maxlength="14" placeholder="02-005-00000"><br>
            </td>
        </tr>
  <tr>
            <td>
                <input type="button" id="executeApi" value="Search by API"/>
            </td>

        </tr>
  </table>
  </form>
</div>
<div id="outGrid"
    data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region: bottom">
    <!-- https://developers.arcgis.com/en/javascript/jssamples/fl_paging.html -->
    <table data-dojo-type="dojox.grid.DataGrid" escapeHTMLInData="false" jsid="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" style="height:100%; width:100%">
        <thead>
        <tr>
            <th field="apino" width="auto">API No</th>
            <th field="otherid" width="auto">State Permit No</th>
            <th field="wellname" width="auto">Operator</th>
            <th field="county" width="auto">County</th>
            <th field="twp" width="auto">Township</th>
            <th field="rge" width="auto">Range</th>
            <th field="section_" width="auto">Section</th>
            <th field="drillertotaldepth" width="auto">Depth (ft)</th>
            <th field="formationtd" width="auto">Formation at Depth</th>
            <th field="folderField" width="auto" >Well Folder</th>
            <th field="logField" width="auto" >Scanned Well Log</th>
            <th field="lasField" width="auto" >LAS Data</th>
        </tr>
        </thead>
    </table>
</div>
</div>
</body>
</html>
[/HTML]

require(["dojo/data/ObjectStore",
    "dijit/registry",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",

    "dojo/ready",
    "esri/tasks/query",
    "esri/tasks/QueryTask",

    "dojo/dom",
    "dojo/on",
    "dojo/_base/array",

    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",

    "dojo/domReady!"],
function(ObjectStore,
         registry,
         Memory,
         Grid,
         ready,
         Query,
         QueryTask,
         dom,
         on,
         array){
    ready(function(){

    var myQueryTask, myQuery;
    myQueryTask = new QueryTask("http://.../ArcGIS/rest/services/aasggeothermal/AZWellHeaders/MapServer/0");

    myQuery = new Query();
    myQuery.returnGeometry = false;
    myQuery.outFields = ["apino","otherid","wellname","county","twp","rge","section_","drillertotaldepth","formationtd","field","relatedresource","welltype"];

function runQuery(){
    var apiNo = dom.byId('apinum').value;
    var otherId = dom.byId('stateperm').value;
    var wellName = dom.byId('wellnameid');
    var county = dom.byId('countyid');
    var twp = dom.byId('twpid');
    var rge = dom.byId('rgeid');
    var section = dom.byId('sectionid');
    var drillerDepth = dom.byId('depthid');
    var formation = dom.byId('formationtdid');
    var field = dom.byId('fieldid');

    myQuery.where ="apino like '%" + apiNo + "%'" + " OR " + "otherid like '%" + otherId + "%'";

    myQueryTask.execute(myQuery,updateGrid);

}

        function apiQuery(){
            var apiNo = dom.byId('apinum').value;
            myQuery.where ="apino like '%" + apiNo + "%'";
            myQueryTask.execute(myQuery,updateGrid);
        }

on(dom.byId("executeApi"), "click", apiQuery);
    });
});

[ATTACH=CONFIG]27747[/ATTACH]

Attachments

Outcomes