title: Java CardLayout JPanel moves up, when second JPanel added
body: <p>I am new to Java and mostly CardLayout. I want to simply switch "windows" represented by JPanels. I read somewhere that job for CardLayout. But my problem is, when <code>add chatPanel</code> to <code>mainPanel</code> (this is the CardLayout one), it shifts the content of <code>connectPanel</code> several pixels to the top, away from its centered position. Is I skip in my code <code>createChatPanel(),</code> its where it should be.</p>
  
  <p>I have this code:    </p>
  
  <pre><code>package App;
  
  import java.awt.CardLayout;
  import java.awt.Dimension;
  import java.awt.GridBagLayout;
  import java.awt.event.ActionEvent;
  import java.awt.event.ActionListener;
  
  import javax.swing.*;
  import Validators.*;
  
  
  
  public class GUI {
  
  private JFrame mainFrame = null;
  private JPanel mainPanel = null;
  private CardLayout cl = new CardLayout();
  
  public GUI(){
  
  
      try {
              UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
           } 
           catch (UnsupportedLookAndFeelException e) {
           }
           catch (ClassNotFoundException e) {
           }
           catch (InstantiationException e) {
           }
           catch (IllegalAccessException e) {
           }
  
      mainFrame = new JFrame("MainChat");
      mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      mainFrame.setSize(640,480);
      mainFrame.setLocationRelativeTo(null);
      mainFrame.setResizable(false);
      mainFrame.setLayout(new GridBagLayout());
  
      JMenuBar menuBar = new JMenuBar();
  
      JMenu menuFile = new JMenu("Soubor");
      JMenu menuHelp = new JMenu("Nápověda");
  
      menuBar.add(menuFile);
      menuBar.add(menuHelp);
  
      menuFile.add(new JMenuItem("Nové Připojení"));
      menuFile.add(new JSeparator());
      menuFile.add(new JMenuItem("Konec"));
      menuHelp.add(new JMenuItem("O programu"));
      mainFrame.setJMenuBar(menuBar);
  
  
      createMainPanel();
      createConnectPanel();
      createChatPanel();
  
      mainFrame.setVisible(true);
  }
  
  public void createMainPanel() {
  
      mainPanel = new JPanel(cl);
      mainFrame.add(mainPanel);
  
  }
  
  public void createConnectPanel() {
  
      JPanel connectPanel = new JPanel();
      mainPanel.add(connectPanel,"connectPanel");
  
      JTextField ip = new JTextField();
      ip.setDocument(new JTextFieldLimit(15));
      ip.setColumns(11);
  
      JLabel iplabel = new JLabel("IP:");
      connectPanel.add(iplabel);
      connectPanel.add(ip);
  
      JButton connect = new JButton("Connect");
      connect.addActionListener(new ActionListener() {
  
          @Override
          public void actionPerformed(ActionEvent e) {
  
              cl.show(mainPanel,"chatPanel");
  
          }
      });
      connectPanel.add(connect);
  
  }
  
  public void createChatPanel(){
  
      JPanel chatPanel = new JPanel();
      mainPanel.add(chatPanel,"chatPanel");
  
      JTextArea chatbox = new JTextArea();
      chatbox.setPreferredSize(new Dimension(200,200));
      chatPanel.add(chatbox);
  
  }
  }
  </code></pre>
  
  <p>Please, what I messed up? Thanks.</p>