title: dojo Show/Hide One ContentPane While Another ContentPane Is Liquid
body: <p>I've been struggling for weeks trying to crack this nut so I'm not sure if it's impossible, or if it's my lack of coding chops... or both. I'm not a programmer and I'm a newbie to Dojo Toolkit.</p>
  
  <p>I have a site using the BorderContainer layout. I'm trying to create an effect where I can use a button to open and close a dropdown type box that will contain controls. I need this dropdown to be hidden on page load, and then open when you click the button.</p>
  
  <p>My problem is that when I open the dropdown, it pushes the content pane below it off the bottom of the browser window. I need the lower ContentPane to stay fit within the remaining space of the browser window when the dropdown opens. Additionally, I want the dropdown to sit outside of the scrollable container for the content below it, which is why I have it set up to sit outside a nested BorderContainer below it.</p>
  
  <p>I've created a simplified version of the code to demonstrate my challenge (see link below). If you load the page you can see the center ContentPane scrolls the content. But, if you then click on the button, a dropdown div expands above the content. Then when you scroll, you'll notice that you can't see the full pane because it's in no-man's-land below the bottom of the browser window. I assume that because the div is set to display:none on load, it's size is not accounted for on page load. Then, when you open it by pressing the button, it's size is additive and the pane below doesn't know how to resize or account for the new element. </p>
  
  <p>I've tried using the visibility attribute, but that leaves a gap for the div when it's still closed. I've tinkered with some code that controls the height that shows promise, but each of my dropdown boxes will be different sizes so I'd prefer that the height be set to "auto" rather than a specified pixel size.</p>
  
  <p>Does anyone have any idea how I can accomplish this so that the lower pane will fit in the space without pushing off the screen?</p>
  
  <p>Here's a sample of the page:</p>
  
  <p><a href="http://equium.com/scaffold.html" rel="nofollow">http://equium.com/scaffold.html</a></p>
  
  <p>(I had some problems trying to insert the full HTML page here as a code sample so if that's a preferable way to handle it, and someone can let me know the best way to embed all of that code, I'd appreciate it.)</p>
  
  <p>Thanks is advance, I'd really apprecaite anyone's feedback.</p>