Grid CSS not being applied

846
2
Jump to solution
09-12-2013 02:57 PM
KennethRichards
New Contributor III
Can anyone tell me why my grid CSS is not being applied? As far as I can see I don't have any other css overwriting it.

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

    <title>Text Search</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.6/"></script>
    <script src="Scripts/App2.js"></script>


    <link rel="stylesheet" href="Styles/Base.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">
   
    <style>
    </style>

</head>
<body>
<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>
</body>
[/HTML]
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor
Ken,


You were just missing a few pieces, parsing the dijits when the page loads, adding the theme to the body so its applied to widgets, and loading the dojox.grid.DataGrid module. Here's a revised version of your code showing the updates. And thanks for including such a simple test case with your post makes it so much easier to figure out what's going wrong. 


<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>     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">        </head> <body class="tundra"> <div id="outGrid">     <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> </body> </html>

View solution in original post

0 Kudos
2 Replies
KellyHutchins
Esri Frequent Contributor
Ken,


You were just missing a few pieces, parsing the dijits when the page loads, adding the theme to the body so its applied to widgets, and loading the dojox.grid.DataGrid module. Here's a revised version of your code showing the updates. And thanks for including such a simple test case with your post makes it so much easier to figure out what's going wrong. 


<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>     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">        </head> <body class="tundra"> <div id="outGrid">     <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> </body> </html>
0 Kudos
KennethRichards
New Contributor III
Thanks for the help. I have only worked the the dojo grids once before and I stumbled my way through.
0 Kudos