I managed to get your desired functionality working correctly but I had to strip some of your code out to simplify the sample.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Resize map problem</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/dgrid.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dgrid/css/skins/claro.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: false
};
</script>
<script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
<script type="text/javascript">
// Globals
var map, resizeEvt, pathName = "http://gis.dhss.mo.gov";
// var fieldNames = [];
require([
"dojo/parser","dojox/mobile", "esri/sniff", "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent", "esri/dijit/Popup",
"esri/dijit/InfoWindow", "dojo/dom", "dijit/registry", "dojo/on", "dojo/dom-construct", "dojo/query",
"esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer","esri/dijit/InfoWindow", "esri/InfoTemplate",
"esri/tasks/query", "esri/tasks/QueryTask", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic",
"esri/geometry/Circle", "esri/geometry/Geometry","esri/geometry/Point", "dojo/_base/declare","dojo/request", "dojo/promise/all", "dojo/store/Memory",
"esri/renderers/SimpleRenderer","dojo/_base/Color", "dojo/_base/array", "dijit/TooltipDialog","dijit/popup","esri/lang",
"dojo/dom-style", "dijit/form/Button", "dijit/form/FilteringSelect",
"dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider","dgrid/extensions/DijitRegistry","dgrid/extensions/ColumnResizer","dgrid/Selection",
"dijit/TitlePane", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/form/Form",
"dojo/domReady!"
], function(
parser, mobile, has, Map, esriConfig, SpatialReference, Extent, Popup,
InfoWindow, dom, registry, on, domConstruct,query,
FeatureLayer, ArcGISDynamicMapServiceLayer, InfoWindow, InfoTemplate,
Query, QueryTask, SimpleFillSymbol, SimpleLineSymbol, Graphic,
Circle, Geometry, Point, declare, request, all, Memory, SimpleRenderer, Color, arrayUtil, TooltipDialog,DijitPopup,esriLang,
domStyle, Button, FilteringSelect,
Grid, ColumnHider, DijitRegistry, ColumnResizer,Selection, TitlePane, ContentPane, BorderContainer, Form
){
parser.parse();
esriConfig.defaults.io.proxyUrl = "http://wwwgis.dhss.mo.gov/Website/proxy/proxy.ashx";
var spatialReference = new SpatialReference({ wkid: 102100});
var startExtent = new Extent(-10583000, 4287025, -9979000, 4980462, spatialReference);
var highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0]), 3), new Color([255, 255, 0, 0.1]))
var countyFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([94, 149, 193]), 2), new Color([203, 221, 235, 0.5]))
var popup = new Popup({ fillSymbol: highlightFillSymbol }, domConstruct.create("div"));
var dialog = new TooltipDialog({
id: "tooltipDialog",
style: "position: absolute; width: 90px; font: normal normal normal 10pt Helvetica;z-index:100"
});
dialog.startup();
map = new Map("mapDiv", {
center: [-92.593, 38.6],
zoom: 6,
basemap:"gray",
autoResize:false
});
var countyLayer = new FeatureLayer(pathName + "/ArcGIS/rest/services/county_simple/MapServer/0", {
id: "countyLayer"
});
var countyRenderer = new SimpleRenderer(countyFillSymbol);
countyLayer.setRenderer(countyRenderer);
map.addLayers([countyLayer]);
map.on("load", function(){
map.graphics.enableMouseEvents();
map.graphics.on("mouse-out", closeDialog);
});
countyLayer.on("mouse-over", function(evt){
var t = "<b>${NAME}</b>";
var content = esriLang.substitute(evt.graphic.attributes,t);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightFillSymbol);
map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 0.85);
DijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
});
resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
on(window, resizeEvt, function(){
// Only resize the map if the titlePane.open is true
if(dijit.byId("tp_map").open){ resizeMap(); }
});
// Show Event for the TitlePane
on(dijit.byId("tp_map"), "show", function(){
console.log('show');
resizeMap();
});
// Hide Event for the TitlePane
on(dijit.byId("tp_map"), "hide", function(){
console.log('hide');
closeDialog();
});
function closeDialog() {
map.graphics.clear();
DijitPopup.close(dialog);
}
function resizeMap() {
console.log('resize');
map.reposition();
map.resize();
}
});
</script>
</head>
<body class="claro">
<div id='mainWindow' data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="reportContainer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="tp_map" class="gridPane" data-dojo-type="dijit/TitlePane" data-dojo-props= "title:'Click a county to find information', open:true" >
<div id="mapDiv"> </div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
overflow:auto;
}
#mainWindow{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#mapDiv{
width:100%;
height:100%;
padding:0;
margin:0;
}
.gridPane{
width:100% !important;
height:100% !important;
padding:0;
margin:0;
}
#banner {
height:auto;
margin: 0;
padding: 0;
}
#header{
background-image: url("../images/logo.jpg");
background-repeat: no-repeat;
background-color:#1E3A62; /*#dcd9c6;*/
color: white;
font-size:20pt; text-align: left;
font-weight:bold;
font-family:"Century Gothic";
height:100px;
margin: 0;
}
#subHeader {
font-size:16px;
background-color:#cbddeb;
font-weight: bold;
padding:0;
margin: 0;
}
.basicContainer{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
height:auto;
}
#countySelect {
z-index: 999;
}
#reportContainer {
height:100%;
}
/*
#tp_map{
height:auto;
}
*/
.esriPopup .title {
background-color:#CBDDEB;
color: #CBDDEB;
font-size:smaller;
height:5px;
}
.esriPopup .titlePane {
background-color:#CBDDEB;
line-height: 22px;
padding-left: 8px;
}
/*
.hidden {
visibility:hidden;
display:none;
}
.visible {
visibility:visible;
height:100%;
display:block;
}
*/
/*
.reportTitlePane{
color: white;
background-color: #76a2c5;
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
overflow: auto;
}
*/
/*used by the formatted grid*/
.claro .dijitTitlePaneTitle {
background: #d3e3ef;
border:solid 1px #29201A;
}
.claro .dijitTitlePaneContentInner {
padding: 1;
font-size: 12px;
overflow:auto;
}
.claro .dijitTitlePaneTextNode {
font-weight: bold;
font-size: 12px;
}
.dgrid {
position: relative;
overflow: auto;
/* This is needed by IE to prevent crazy scrollbar flashing */
border: 1px solid #dddddd;
/* height: 30em; */
display: block;
color:black;
}
.dgrid-grid {
/*
height: 200px;
*/
height: auto;
/*
width: auto;
*/
}
.dgrid-header {
font-weight: normal;
font-size:11px;
height: auto;
}
.dgrid-content {
position: relative;
margin-top: 16px;
width:inherit;
}
.dgrid .dgrid-cell {
min-width: 50px;
border-color: #dddddd;
}
.dgrid .dgrid-scroller {
max-height: 200px;
position: relative;
}
.dgrid .field-OBJECTID, .field-Shape.len {
min-width: 0px;
}
.title {
font-weight: bold;
font-size: medium;
padding-top: 11px;
}
.details {
padding: 2px;
font-size: medium;
}
h2, h3, h4 {
color: #000000;
}
#downloadForm {
height: 0px;
width: 0px;
display:none;
}
Compare the changes I've made and let me know if you have any questions.