resize events on map in closed titlepane

Question

I have a map in a titlePane.  I want to be able to minimize the titlePane to give more room on the screen.  If my titlePane is open when I resize, the map is fine.  If I have it closed when I resize my browser window, then the map is cropped and my featureLayer isn't even getting drawn.

I've read some of the threads about how I need to set the map parameter to "autoResize:false" and then manage my map resizing manually.  I think I'm doing this, but apparently I have something out of sequence.

http://jsfiddle.net/schlot/qxut9/

JonathanUihlein · Answer

I updated your jsfiddle sample to work correctly.

I tried to avoid removing code.

http://jsfiddle.net/qxut9/3/

TracySchloss · Answer

It works in this stripped down example, but when I combine it with the full project, it still isn't working.    I know I must be close, but I haven't figured out where my issues are yet.  Since my map is only a set of county boundaries, I might discover the user doesn't want that anyway, they'd just as soon work just from a  dropdown of names and call it good.

JonathanUihlein · Answer

I managed to get your desired functionality working correctly but I had to strip some of your code out to simplify the sample. Resize map problem

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.