domConstruct.empty, how do I resize the div back to original?

TracySchloss — Sat, 11 Dec 2021 16:18:41 GMT

I have a menu that creates a new dropdown once the user makes a selection. The contents of this dropdown are only appropriate for certain selections, so I don't want it displayed all the time. I have a Clear button that gets rid of the dropdown I created, but I still want to keep the original DIV I created, so I can populate it with new contents as needed.

Once I have created the first dropdown, even if I use something like domConstruct.empty to get rid of the dropdown I make, the parent div never does resize back to how it was before I ever created the dropdown in the first place. I tried defining style that has visibility:hidden and display:none and using domClass.toggle to switch to a style that wouldn't occupy any height, but that doesn't work either.

Do I have to remove the entire DIV I used for my dropdown and create a new one of those too? It doesn't seem like I should have to do this.

Here's my HTML:

                   <div class="panel-body">
                    <h5>Choose one:</h5>
                      <div id="categoryDiv" class="mySelect"> 
                      </div>
                      <h5 id="specHeader"></h5>
                        <div id="specialtyDiv" class="mySelect div-visible"> </div>
                     
                     <div id="clearDiv" class="div-visible"> 
                        <button id="btnClearCat" type="button" class="btn btn-default"  style="float:right;">Clear</button>
                        </div>
                    </div>

My dropdown is actually a dgrid with a single column and is getting created with a click in another grid:

  var dataGrid = new declare([Grid, Selection]);

      app.specDropDown = new dataGrid({
          selectionMode: 'single',
          store: currentMemory,
          showHeader: false,
          columns: {
              "id": "id",
              "name": "name",
              "value": "value"
          },
          renderRow: renderCategoryRow    
      }, "specialtyDiv");
      app.specDropDown.startup();

The clear button executes this function:

//clears category filter on featureLayer
function removeDefinitionExpression(){
    var whereClause= '1=1';
    app.featureLayer.setDefinitionExpression(whereClause);
    dom.byId('subHeader').innerHTML = 'Medicaid Provider Search';
    dom.byId('gridHeader').innerHTML = "Providers in this area:"
    searchType = "";
    domClass.toggle('clearDiv', 'div-visible');
   app.dropDown.clearSelection();
   domConstruct.empty(dom.byId('specialtyDiv'));
   domClass.toggle('specialtyDiv', 'div-visible');
   dom.byId('specHeader').innerHTML = "";
   app.map.infoWindow.hide();
      initGridUpdate();
}

Here is the style I set for div-visible:

.div-visible {
  visibility: hidden;
  display:none;
  height:0px;
}

It works properly as far as getting rid of the dropdown contents. A new one is created in the place. It's just that once the space is allocated initially, I can never get it back to it's initial height. When I examine specialtyDiv, I can see that most of the style parameters I'm attempting to add are crossed out, so I know they're overwritten somewhere else.

Re: domConstruct.empty, how do I resize the div back to original?

TracySchloss — Mon, 20 Jul 2015 20:00:56 GMT

I put in an if statement to first check that the div contained the class and only toggled it if it did. This seems to have taken care of my problem.

if (domClass.contains('specialtyDiv', 'div-visible')) {

domClass.toggle('specialtyDiv', 'div-visible');

}

topic domConstruct.empty, how do I resize the div back to original? in ArcGIS JavaScript Maps SDK Questions

domConstruct.empty, how do I resize the div back to original?

Re: domConstruct.empty, how do I resize the div back to original?