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"> 
                      <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>

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");


The clear button executes this function:

//clears category filter on featureLayer
function removeDefinitionExpression(){
    var whereClause= '1=1';
    dom.byId('subHeader').innerHTML = 'Medicaid Provider Search';
    dom.byId('gridHeader').innerHTML = "Providers in this area:"
    searchType = "";
    domClass.toggle('clearDiv', 'div-visible');
   domClass.toggle('specialtyDiv', 'div-visible');
   dom.byId('specHeader').innerHTML = "";;

Here is the style I set for div-visible:

.div-visible {
  visibility: hidden;

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.