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.
