AnsweredAssumed Answered

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

Question asked by schlot on Jul 17, 2015
Latest reply on Jul 20, 2015 by schlot

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.

Outcomes