FeatureTable sort Ascending/Descending css

LindaDunklee · ‎06-14-2017

I am implementing a feature table and have done a lot of customization to the CSS to make it appear where I want it to. Most importantly, I am not using body claro at all. Everything appears fine except for the menu when I click on the column header. The sort ascending/sort descending options appear in the bottom left corner under the table instead of under/on top of the column header. Does anyone know what I can override to get it to appear where it should?

RobertScheitlin__GISP · ‎06-15-2017

Linda,

I would have to see your CSS customization and what css style sheets you are loading. Are you saying that you are using the FeatureTable dijit?

LindaDunklee · ‎06-21-2017

Robert,

Yes, the feature table dijit is correct. The css relevant to the table would be:

.dgrid-content.ui-widget-content{
margin-top:70px;
}
.table-striped>tbody>tr:nth-child(odd)>td{
background-color: #bfbdb5;
text-align:center;
}
.table-striped>tbody>tr:nth-child(even)>td{
background-color:white;
text-align:center;
}
.dgrid-row-odd {
background: light-gray !important;
display:inline-block;
}
.dgrid-row-even {
background: white !important;
display:inline-block;
}
.panel-default > .panel-heading {
background-color:#acc32b;
color:white;
}
.panel-collapse-bottom{
position: absolute;
bottom: 100%;
height:500%;
width:100%;
border-radius:5px;
background-color:white;
}
.row{
margin:0px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
background-color:#acc32b;
color:white;
font-weight:bold;
border-radius: 5px;
}
a{
color:white;
}
.nav-tabs {
border-bottom: none;
}
#tableHeader{
background-color:#00abea;
}
.accordian_row{
height:4%;
width:100%;
position: absolute;
bottom:0;
}
#resultsTitle{
text-align:center;
font-weight:bold;
z-index:500;
}
.col-lg-12{
z-index:50;
padding:0px;
}
.panel-content.table{
height:100%;
background-color:gray;
}
#sitesTable .dgrid-header
{
background-color:#bfbdb5;
position:fixed;
z-index:200;
}
.dgrid-contents{
background-color:white;
}
#openTable{
width:100%;
background-color:#acc32b;
color:white;
font-weight:bold;
font-size:16px;
height:70px;
z-index:200;
bottom:0;
position:fixed;
}
#tableContainer{
display:none;
background-color:white;
z-index:250;
height:30%;
width:100%;
bottom:6.75%;
position:fixed;
resize:vertical;
}
.dijitContentPane.esri-feature-table-content-pane.esri-feature-table-menu.dijitBorderContainerNoGutter-child.dijitBorderContainerNoGutter-dijitContentPane.dijitBorderContainerNoGutterPane.dijitAlignTop{
display:none;
}
#linkID{
display:none;
}
#downloadTable{
right:2%;
bottom:1%;
position:fixed;
z-index:250;
display:none;
}
#uploadTable{
right:5%;
bottom:1%;
position:fixed;
z-index:250;
display:none;
}
#clearSelection{
right:8%;
bottom:1%;
position:fixed;
z-index:250;
display:none;
}

The HTML:

The table container/panel is toggled by a button click - it is hidden initially and then displays at half screen when the button is clicked, using display:none and display:block. The sitesTable is the div the table is actually registered to.

When I apply the claro class to any of the HTML elements above, the table contents all disappear except for the header. The menu items then show up in the right place. When the claro class is removed, the table displays how I want it to, but the behavior with the menu I described above occurs.

I'm open to any optimizations of this; the CSS has been thrown together over several months of tweaks and it's probably a bit of a mess now.

RobertScheitlin__GISP · ‎06-22-2017

Linda,

There are to many missing pieces of information for me to help yet. There are many html elements in your app that need to be there for all this css to make any sense. We can either start with this sample below or you will need to provide more code:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Using FeatureTable</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.20/"></script>

  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .dgrid-content.ui-widget-content {
      /*margin-top: 70px;*/
    }

    .table-striped>tbody>tr:nth-child(odd)>td {
      background-color: #bfbdb5;
      text-align: center;
    }

    .table-striped>tbody>tr:nth-child(even)>td {
      background-color: white;
      text-align: center;
    }

    .dgrid-row-odd {
      background: light-gray !important;
      display: inline-block;
    }

    .dgrid-row-even {
      background: white !important;
      display: inline-block;
    }

    .panel-default>.panel-heading {
      background-color: #acc32b;
      color: white;
    }

    .panel-collapse-bottom {
      position: absolute;
      bottom: 100%;
      height: 500%;
      width: 100%;
      border-radius: 5px;
      background-color: white;
    }

    .row {
      margin: 0px;
    }

    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {
      background-color: #acc32b;
      color: white;
      font-weight: bold;
      border-radius: 5px;
    }

    a {
      color: white;
    }

    .nav-tabs {
      border-bottom: none;
    }

    #tableHeader {
      background-color: #00abea;
    }

    .accordian_row {
      height: 4%;
      width: 100%;
      position: absolute;
      bottom: 0;
    }

    #resultsTitle {
      text-align: center;
      font-weight: bold;
      z-index: 500;
    }

    .col-lg-12 {
      z-index: 50;
      padding: 0px;
    }

    .panel-content.table {
      height: 100%;
      background-color: gray;
    }

    #sitesTable .dgrid-header {
      background-color: #bfbdb5;
      position: fixed;
      z-index: 200;
    }

    .dgrid-contents {
      background-color: white;
    }

    #openTable {
      width: 100%;
      background-color: #acc32b;
      color: white;
      font-weight: bold;
      font-size: 16px;
      height: 70px;
      z-index: 200;
      bottom: 0;
      position: fixed;
    }

    /*#tableContainer {
      display: none;
      background-color: white;
      z-index: 250;
      height: 30%;
      width: 100%;
      bottom: 6.75%;
      position: fixed;
      resize: vertical;
    }*/

    .dijitContentPane.esri-feature-table-content-pane.esri-feature-table-menu.dijitBorderContainerNoGutter-child.dijitBorderContainerNoGutter-dijitContentPane.dijitBorderContainerNoGutterPane.dijitAlignTop {
      display: none;
    }

    #linkID {
      display: none;
    }

    #downloadTable {
      right: 2%;
      bottom: 1%;
      position: fixed;
      z-index: 250;
      display: none;
    }

    #uploadTable {
      right: 5%;
      bottom: 1%;
      position: fixed;
      z-index: 250;
      display: none;
    }

    #clearSelection {
      right: 8%;
      bottom: 1%;
      position: fixed;
      z-index: 250;
      display: none;
    }

    #toggleTable {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 20;
    }
  </style>

  <script>
    require([
      "esri/layers/FeatureLayer",
      "esri/dijit/FeatureTable",
      "esri/geometry/webMercatorUtils",
      "esri/map",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/parser",
      "dojo/ready",
      "dojo/on",
      "dojo/_base/lang",
      "dijit/registry",
      "dijit/form/Button",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer",
      "dijit/form/TextBox",
      "dojo/dom-style"
    ], function(
      FeatureLayer, FeatureTable, webMercatorUtils, Map,
      domConstruct, dom, parser, ready, on, lang,
      registry, Button, ContentPane, BorderContainer, TextBox,
      domStyle
    ) {
      parser.parse();

      ready(function() {

        var myFeatureLayer;
        var map = new Map("map", {
          basemap: "dark-gray"
        });

        map.on("load", loadTable);

        function loadTable() {

          // Create the feature layer
          myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer...", {
            mode: FeatureLayer.MODE_ONDEMAND,
            visible: true,
            outFields: [
              "Collected", "Status", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Street", "Native"
            ],
            id: "fLayer"
          });

          //set map extent
          on(myFeatureLayer, "load", function(evt) {
            var extent = myFeatureLayer.fullExtent;
            if (webMercatorUtils.canProject(extent, map)) {
              map.setExtent(webMercatorUtils.project(extent, map));
            }
          });

          map.addLayer(myFeatureLayer);

          myFeatureTable = new FeatureTable({
            "featureLayer": myFeatureLayer,
            "outFields": [
              "Collected", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Native"
            ],
            fieldInfos: [{
                name: 'Spp_Code',
                alias: 'Species Code',
              },
              {
                name: 'Cmn_Name',
                alias: 'Common Name',
              },
              {
                name: 'Sci_Name',
                alias: 'Scientific Name',
              }
            ],
            "map": map
          }, 'sitesTable');

          myFeatureTable.startup();

          on(myFeatureTable, "load", function(evt) {
            console.log("The load event - ", evt);
          });

          on(dom.byId("toggleTable"), "click", function(){
            if(domStyle.get("tableContainer", "display") === "none"){
              domStyle.set("tableContainer", "display", "block");
            }else{
              domStyle.set("tableContainer", "display", "none");
            }
          });

          myFeatureTable.on("show-statistics", function(evt) {
            console.log("show-statistics avgfield - ", evt.statistics.avgField);
            console.log("show-statistics countfield - ", evt.statistics.countField);
            console.log("show-statistics maxfield - ", evt.statistics.maxField);
            console.log("show-statistics minfield - ", evt.statistics.minField);
            console.log("show-statistics stddevfield - ", evt.statistics.stddevField);
            console.log("show-statistics sumfield - ", evt.statistics.sumField)
          });

          myFeatureTable.on("row-select", function(evt) {
            console.log("select event - ", evt.rows[0].data);
          });

          myFeatureTable.on("row-deselect", function(evt) {
            console.log("deselect event - ", evt.rows[0].data);
          });

          myFeatureTable.on("refresh", function(evt) {
            console.log("refresh event - ", evt);
          });

          myFeatureTable.on("column-resize", function(evt) {
            //triggered by ColumnResizer extension
            console.log("column-resize event- ", evt);
          });

          myFeatureTable.on("column-state-change", function(evt) {
            // triggered by ColumnHider extension
            console.log("column-state-change event - ", evt);
          });

          myFeatureTable.on("sort", function(evt) {
            console.log("sort event - ", evt);
          });

          myFeatureTable.on("filter", function(evt) {
            console.log("filter event - ", evt);
          });
        }
      });
    });
  </script>
</head>

<body> <!--class="claro esri"-->
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
      <button type="button" id="toggleTable">Show Table</button>
      <div id="map"></div>
    </div>
    <div id="tableContainer">
      <div id="tablePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
        <div id="sitesTable"></div>
      </div>
    </div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍