Adding component to my GridBagLayout moves other components far to the right

Question

I'm seeing some really weird results when I try to lay out my JPanel . Everything works fine before I add the last JTextField subline :

When I add that, the JTextField above it moves to the right, so that it begins where subline ends:

Here's the code that creates this layout:

public class Opspanel extends JPanel{
    private static final long serialVersionUID = -6393281054430179953L;
    public Opspanel() {
        GridBagLayout layout = new GridBagLayout();
        setLayout(layout);
        GridBagConstraints constraints = new GridBagConstraints();

        constraints.gridx = 0;
        constraints.gridy = 0;
        constraints.anchor = GridBagConstraints.LINE_START;
        add(new JLabel("Vendor ID"), constraints);

        constraints.gridx = 1;
        constraints.gridy = 0;
        constraints.anchor = GridBagConstraints.LINE_START;
        JTextField vendorid = new JTextField();
        vendorid.setPreferredSize(new Dimension(100,20));
        add(vendorid, constraints);

        constraints.gridx = 0;
        constraints.gridy = 1;
        constraints.anchor = GridBagConstraints.LINE_START;
        add(new JLabel("Email Date"), constraints);

        constraints.gridx = 1;
        constraints.gridy = 1;
        constraints.anchor = GridBagConstraints.LINE_START;
        JTextField emaildate = new JTextField();
        emaildate.setPreferredSize(new Dimension(100,20));
        add(emaildate, constraints);

        constraints.gridx = 2;
        constraints.gridy = 1;
        constraints.anchor = GridBagConstraints.LINE_START;
        add(new JLabel("Email Time"), constraints);

        constraints.gridx = 3;
        constraints.gridy = 1;
        constraints.anchor = GridBagConstraints.LINE_START;
        JTextField emailtime = new JTextField();
        emailtime.setPreferredSize(new Dimension(100,20));
        add(emailtime, constraints);

        constraints.gridx = 0;
        constraints.gridy = 2;
        constraints.anchor = GridBagConstraints.LINE_START;
        add(new JLabel("Subject Line"), constraints);

        constraints.gridx = 1;
        constraints.gridy = 2;
        constraints.anchor = GridBagConstraints.LINE_START;
        JTextField subline = new JTextField();
        subline.setPreferredSize(new Dimension(500, 20));
        add(subline, constraints);  

    }
}

How can I fix this?

Answer 1

According to the docs for GridBagLayout ,

Each GridBagLayout object maintains a dynamic, rectangular grid of cells, with each component occupying one or more cells, called its display area.

In your code, your grid has 3 rows and 4 columns. You're telling each of your components to occupy exactly one cell, in the position given by gridx and gridy .

The fact that you don't like some of them "stopping" or "starting" where they do indicates that you really wanted some of them to occupy more than one cell.

You're in luck! GridBagLayout can do that. You're looking for GridBagLayout.gridwidth :

Specifies the number of cells in a row for the component's display area.

Use REMAINDER to specify that the component's display area will be from gridx to the last cell in the row. Use RELATIVE to specify that the component's display area will be from gridx to the next to the last one in its row.

gridwidth should be non-negative and the default value is 1.

---

In your example, you put the "Subject Line" text field in the second column ( gridx = 1 ). Since you left gridwidth at its default value of 1 , that text field cannot overlap the third or fourth columns. So, if it grows, the whole column must grow with it.

You can let it fill the whole horizontal space by letting it cover multiple grid cells. (If you're familiar with Microsoft Excel or tables in Microsoft Word or similar programs, this is like the "Merge Cells" option.)

To make it cover 3 columns, starting with gridx = 1 :

constraints.gridx = 1;
constraints.gridwidth = 3;

Or alternatively, to make it cover all cells from column gridx = 1 to the right:

constraints.gridx = 1;
constraints.gridwidth = GridBagLayout.REMAINDER;

Just don't forget to reset gridwidth to 1 before you use it to add another component that's supposed to cover only one column!