topic Re: HTML not filling screen and grid not displaying correctly in ArcGIS JavaScript Maps SDK Questions

HTML not filling screen and grid not displaying correctly

KennethRichards — Wed, 25 Sep 2013 15:47:45 GMT

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

Re: HTML not filling screen and grid not displaying correctly

JonathanUihlein — Wed, 25 Sep 2013 16:03:24 GMT

Trying to help...

Can you post your CSS and, if "App2.js" is relevant, that as well?

I see some malformed HTML but that wouldn't cause the issues you are having.

(http://validator.w3.org/ -> this should help clean up any HTML syntax errors)

Also, instead of a dojox datagrid, you should look into using dgrid.
It's incredibly flexible, updated frequently and far easier to use than a dojox datagrid (this is my opinion!).

Re: HTML not filling screen and grid not displaying correctly

KennethRichards — Sun, 12 Dec 2021 07:16:43 GMT

App2.js

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);
        }
        function stPerQuery(){
            var otherId = dom.byId('stateperm').value;
            myQuery.where ="otherid like '%" + otherId + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function countQuery(){
            var county = dom.byId('countyid').value;
            myQuery.where ="county like '%" + county+ "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function fieldQuery(){
            var field = dom.byId('fieldid').value;
            myQuery.where ="field like '%" + field + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function twnQuery(){
            var twp = dom.byId('twpid').value;
            myQuery.where ="twp like '%" + twp + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function rgeQuery(){
            var rge = dom.byId('rgeid').value;
            myQuery.where ="rge like '%" + rge + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function sectQuery(){
            var section = dom.byId('sectionid').value;
            myQuery.where ="section_ like '%" + section + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function operQuery(){
            var operator = dom.byId('operatorid').value;
            myQuery.where ="operator like '%" + operator + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function wellNaQuery(){
            var wellName = dom.byId('wellnameid').value;
            myQuery.where ="wellname like '%" + wellName + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function depthQuery(){
            var drillerDepth = dom.byId('depthid').value;
            myQuery.where ="drillertotaldepth >=" + drillerDepth + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }
        function formQuery(){
            var formation = dom.byId('formationtdid').value;
            myQuery.where ="formationtd like '%" + formation + "%'" + " AND " +"apino like '02-%'";
            myQueryTask.execute(myQuery,updateGrid);
        }


function showResults(myFeatures){
    console.log(myFeatures);
    var s = "";
          for (var i=0, il=myFeatures.features.length; i < il; i++) {
            var featureAttributes = myFeatures.features.attributes;
            for (att in featureAttributes) {
              s = s + "<strong>" + att + ": </strong>" + featureAttributes[att] + "<br />";
            }
          }
          dojo.byId("info").innerHTML = s;
}

function updateGrid(featureSet){
        console.log(featureSet);
        var data=[];
        var grid = registry.byId('grid');
        array.forEach(featureSet.features, function (entry) {

            var logs = [],
                las = [],
                folders = [],
                relatedResource = entry.attributes.relatedresource === null ? "no value" : entry.attributes.relatedresource;

            var raw = relatedResource.split("|");
            raw.forEach(function (bit){
                var resource = bit.split(", ");
                if (resource[0] && resource[1]){
                var url = resource[1].trim();
                var name = resource[0].trim();
                }
                var anchor = "<li><a href='" + url + "' target='_blank'>" + name + "</a></li>";
                if (url != null ){
                if ( url.indexOf(".tif", url.length -4) !==-1){
                    logs.push(anchor);
                }
                if ( url.indexOf(".pdf", url.length -4) !==-1){
                    folders.push(anchor);
                }
                if ( url.indexOf(".las", url.length -4) !==-1){
                    las.push(anchor);
                }
               }
            });

            data.push({
                objectid:entry.attributes.objectid,//0
                apino:entry.attributes.apino,//1
                otherid:entry.attributes.otherid,//2
                wellname:entry.attributes.wellname,//3
                county:entry.attributes.county,//4
                twp:entry.attributes.twp,//5
                rge:entry.attributes.rge,//6
                section_:entry.attributes.section_,//8
                drillertotaldepth:entry.attributes.drillertotaldepth,//9
                formationtd:entry.attributes.formationtd,//10
                logField: '<ul>' + logs.join(" ") + '</ul>',
                lasField: '<ul>' + las.join(" ") + '</ul>',
                folderField: '<ul>' + folders.join(" ") + '</ul>'
            });
        });
        var dataForGrid= {
            items: data
            };
console.log(data);
        var store = new ObjectStore({objectStore: new Memory({data:dataForGrid}) });
        grid.setStore(store);
    }
    on(dom.byId("executeApi"), "click", apiQuery);
    on(dom.byId("executeSP"), "click", stPerQuery);
    on(dom.byId("executeCount"), "click", countQuery);
    on(dom.byId("executeField"), "click", fieldQuery);
    on(dom.byId("executePLSS"), "click", twnQuery);
    on(dom.byId("executeOper"), "click", operQuery);
    on(dom.byId("executeWellN"), "click", wellNaQuery);
    on(dom.byId("executeDepth"), "click", depthQuery);
    on(dom.byId("executeForm"), "click", formQuery);

    });
});

CSS

head{
     height: 100%;
    width: 100%;
}
body {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.46, rgb(250, 243, 232)), color-stop(0.67, rgb(244, 226, 207)), color-stop(0.87, rgb(233, 202, 161))) no-repeat;
    height: 100%;
    width: 100%;
    margin: 0;
}
#titleBar{
    position:relative;
    overflow: hidden;
}
#titleText{
    padding-left: 1px;
    text-align: left;
    z-index: 5;
    position: absolute;
    left: 1%;
    font-family: "Helvetica Nueue","Trebuchet MS",Arial,"Nimbus Sans L",FreeSans,sans-serif;
    font-weight: bold;
    font-size: 125%;
    overflow: inherit;
}
#titleImg{
    position: absolute;
    right: 1%;
    top: 5%;
    z-index: 5;
    padding-right: 1px;
    overflow: inherit;
}
#navigationMenu {
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.08, #B87147),color-stop(0.54, #9B440E) );
    border: 1px gray;
    padding:1px;
    color: #feffff;
    text-align: center;
    z-index: 5;
}
#navigationMenu li {
    display:inline;
    padding: 25px;
}
.mapMenus a:link{
    color: #feffff;
    text-decoration: none;
}
.mapMenus a:visited{
    color: #feffff;
    text-decoration: none;
}
.mapMenus a:hover{
    color: #feffff;
    text-decoration: underline;
}

.mapMenus a:active{
    color: #feffff;
    text-decoration: none;
}
#search_info {
    border-left:1px solid gray;
    border-right:1px solid gray;
    border-top:1px solid gray;
    border-bottom:1px solid gray;
    background: #E9CAA1;

}
#image_box {
    border:1px solid gray;
    float:right;
    padding-right:10px;
    padding-top:10px;
    padding-left:10px;
    padding-bottom:10px;
    margin-top:10px;
    margin-right:10px;
}
#img_info {
    border-top:1px solid gray;
    padding-bottom:-10px;
    padding-left:10px;
    padding-right:10px;
    margin-left:-10px;
    margin-right:-10px;
}

form table {

    border:1px solid gray;
    width: 382px;
   
}

#outGrid{
    font-size: 75%;
}

Re: HTML not filling screen and grid not displaying correctly

JonathanUihlein — Wed, 25 Sep 2013 16:22:23 GMT

Thanks for posting... looking at it now.

CSS looks fine; might actually be the HTML.

Content Panes should be inside a BorderContainer, not siblings within the HTML block.

Check out this post on how to fix your HTML: http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html

Will look again and see if anything else needs tweaking.

Re: HTML not filling screen and grid not displaying correctly

KennethRichards — Wed, 25 Sep 2013 17:13:35 GMT

Thanks for posting... looking at it now.

CSS looks fine; might actually be the HTML.

Content Panes should be inside a BorderContainer, not siblings within the HTML block.

Check out this post on how to fix your HTML: http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html

Will look again and see if anything else needs tweaking.

I am thinking it is in the HTML too. I'm still new to html and I keep finding error like missed placed div tags every time I look at it. But this one has me stumped.

Re: HTML not filling screen and grid not displaying correctly

JonathanUihlein — Thu, 26 Sep 2013 16:57:57 GMT

I would try rewriting the HTML section of your application to properly use BorderContainer and ContentPane.

With the code as it is now, you will get parser errors.

Don't forget to update this thread with your solution, or to mark it as 'answered' to assist future users with the same issue.

Re: HTML not filling screen and grid not displaying correctly

KennethRichards — Thu, 26 Sep 2013 17:13:12 GMT

I would try rewriting the HTML section of your application to properly use BorderContainer and ContentPane.

With the code as it is now, you will get parser errors.

Don't forget to update this thread with your solution, or to mark it as 'answered' to assist future users with the same issue.

I've changed the BorderContainer and ContentPane order but am still have the same problem.