Screen goes blank after page loads

1118
5
Jump to solution
09-30-2013 09:45 AM
KennethRichards
New Contributor III
Every time I load my web page the everything displays for half a second and then the screen goes blank. It appears that all of my html elements are given a height of 0.
Can anyone see what I am missing?

[HTML]
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Text Search</title>

    <link rel="stylesheet" href="styles/Base.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
    <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="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>
</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/textsearch.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_body"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
<div id="search_info"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'top'">
    <div id="info">
    <p>
        <strong> Text Search:</strong> 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>
<div id="search_body"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
<div id="search_info"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'top'">
    <div id="info">
    <p>
        <strong> Text Search:</strong> 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>
<div id="image_box"
        data-dojo-type="dijit/layout/ContentPane"
    data-dojo-props="region:'right'">
    <img src="photos/Arizona_Meridians_Labled.jpg" height="385" width="350">
        <div id="img_info">
            <p>Map of Arizona State Meridians</p>
        </div>
</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'" style="height: 100%;">
    <table data-dojo-type="dojox.grid.DataGrid" 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]

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;     background: linear-gradient(bottom, #FAF4E8 46%, #F4E3CF 67%, #E9CAA1 87%);     background: -o-linear-gradient(bottom, #FAF4E8 46%, #F4E3CF 67%, #E9CAA1 87%);     background: -moz-linear-gradient(bottom, #FAF4E8 46%, #F4E3CF 67%, #E9CAA1 87%);     background: -ms-linear-gradient(bottom, #FAF4E8 46%, #F4E3CF 67%, #E9CAA1 87%);     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) );     background: linear-gradient(bottom, #B87047 8%, #9B440E 54%);     background: -o-linear-gradient(bottom, #B87047 8%, #9B440E 54%);     background: -moz-linear-gradient(bottom, #B87047 8%, #9B440E 54%);     background: -ms-linear-gradient(bottom, #B87047 8%, #9B440E 54%);     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_body{     height: 100%; } #search_info {     border-left:1px solid gray;     border-right:1px solid gray;     border-top:1px solid gray;     border-bottom:1px solid gray;     background: #E9CAA1;     margin-left: 2px;     margin-top: 2px;     margin-right: 2px; } #image_box {     border:1px solid gray;     padding-right:10px;     padding-top:10px;     padding-left:10px;     padding-bottom:10px;     margin-top:2px;     margin-right:2px; } #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;     margin-top:2px;     margin-left:2px; } #search_body { border:2px solid gray;     height: 100%; } #outGrid{     height: 22%;     font-size: 75%; }
0 Kudos
1 Solution

Accepted Solutions
ZachLiu1
Occasional Contributor II
Examine your whole layout.

The BorderContainer takes up the whole screen with
width: 100%; height: 100%;

Each ContentPane (Top, Bottom, Left, Right) should all have its own size for the layout to work, you may be missing some.

View solution in original post

0 Kudos
5 Replies
ZachLiu1
Occasional Contributor II
head {
    height: 100%;
    width: 100%;
}


should be

html {
    height: 100%;
    width: 100%;
}


?
0 Kudos
KennethRichards
New Contributor III
head {
    height: 100%;
    width: 100%;
}


should be

html {
    height: 100%;
    width: 100%;
}


?


I can't believe I didn't see that. Now I just need to get the grid to not fill the whole screen. Any ideas there?
0 Kudos
ZachLiu1
Occasional Contributor II
We've all missed some super stupid mistakes, 🙂

to follow up, I think you have a inline style for your "outgrid"

style="height: 100%;"

is that the issue?
0 Kudos
KennethRichards
New Contributor III
We've all missed some super stupid mistakes, 🙂

to follow up, I think you have a inline style for your "outgrid"

style="height: 100%;"

is that the issue?


I erased that and it didn't seem to change anything. It was a good idea though.
0 Kudos
ZachLiu1
Occasional Contributor II
Examine your whole layout.

The BorderContainer takes up the whole screen with
width: 100%; height: 100%;

Each ContentPane (Top, Bottom, Left, Right) should all have its own size for the layout to work, you may be missing some.
0 Kudos