title: Java GUI: Prevent overlap of dynamically resized Swing components
body: <p>Disclaimer: I am new to swing.</p>
  
  <p><strong>TLDR</strong>:
  I am dynamically adding JPanels to an "enclosing" JPanel with a button. All panels use MiGLayout. The outer panel contains one cell only, and more rows are created as inner panels are added, top to bottom ("flowy" constraint). The inner panels are made of two rows --but the second one is revealed dynamically ("hidemode 3" layout constraint, with <code>setVisible(false)</code> until a condition is met.)</p>
  
  <p>What's happening, is when adding an inner panel, and causing its second row to be visible, it overlaps with the panel below it. I have tried to call revalidate and repaint everywhere possible. To me, it would seem that the outer/enclosing panel simply has to revalidate its child components, but this doesn't seem to be happening.</p>
  
  <h2>Background</h2>
  
  <p>I am using MiGLayout and Swing to create a GUI for importing to my database.
  Users should be able to hit a button which adds panels to an enclosing panel.
  Specifically, the [portion of the] GUI [in question] is made of...</p>
  
  <ol>
  <li>an enclosing <code>JPanel</code>(black), containing a:</li>
  <li><code>JToolbar</code>(blue) and</li>
  <li><code>JScrollPane</code>(red),  which has as its <code>Viewport</code></li>
  <li>another <code>JPanel</code>(green)</li>
  </ol>
  
  <p>this last <code>JPanel</code>, #4, is a container for dynamically added panels via a button (see the second picture below).</p>
  
  <p><img src="https://i.stack.imgur.com/lJKLz.png" alt="from windowbuilder/eclipse"></p>
  
  <p>The bottom most JPanel, #4, uses MiGLayout. Itself, and the scroll pane that contains it, are hidden from view until a user hits that button next to the "File" comboBox. (not shown in picture above, as that wasn't runtime).</p>
  
  <p>Once pressed, a subclass of JPanel is added to this panel:
  (runtime screenshot)</p>
  
  <p><img src="https://i.stack.imgur.com/Na5WK.png" alt="panel added"></p>
  
  <p>The panels are stacked on top of eachother as more are added. </p>
  
  <p>This inner panel is made of two rows, but the second one is invisible and <strong>does not affect the layout until it is visible</strong>. It is made visible via listeners once a condition is met within the text field..</p>
  
  <h2>The issue</h2>
  
  <p>If the second row of an inner panel <strong>becomes visible</strong>, it overlaps the panel in the row under it. Here's what I mean....</p>
  
  <p>User adds three panels:
  <img src="https://i.stack.imgur.com/yd9Vw.png" alt="3 sources just fine"></p>
  
  <p>Second panel triggers <code>setVisible(true)</code>, so now is made of two rows, but hides the third panel:</p>
  
  <p><img src="https://i.stack.imgur.com/4QvSX.png" alt="overlap"></p>
  
  <p>For dramatic effect (same runtime):
  <img src="https://i.stack.imgur.com/4B9xR.png" alt="obvious overlapping"></p>
  
  <p>The problem is obvious. How do I prevent this overlap?</p>
  
  <p>Ideally, I'd want the out panel to reorganize itself appropriately to account for the larger size.</p>
  
  <p>Say I add one panel, then trigger the hidden row, THEN add another panel --- there is still overlap. It was my understanding that <code>revalidate()</code> should take care of these things but I have called it every place possible (perhaps too much, if possible??) to no avail..</p>
  
  <p>I have tried many different constraints on the enclosing panel as well as the inner panels, with no luck. I have tried both creating the second row and show/hiding it dynamically, or simply creating it dynamically, with no luck. It consistently overlaps the same way, and I cannot get it to re-layout these inner panels. </p>
  
  <p>I can think of some work arounds, but this seems like it should be possible!</p>
  
  <p>My longest question ever, sorry for that. Any help is appreciated.
  Thanks.</p>