Search code examples
javagrid-layout

Why Does GridLayout split the columns in wrong way?

While using GridLayout, I want to that each row will have its own text field to enter values. Near each textfield, I've added an empty label for a use of a red "x" that indicates if the given values is correct or not(depends on functions and other conditions I may have ). Tried to change the number of rows and columns to match what I actually added

    pnlTop=new JPanel(new GridLayout(0,2));
    // Username
    lblUserName = new JLabel("Username:");
    txtUserName = new JTextField(10);

    // Password
    lblPassword = new JLabel("Password:");
    txtPassword = new JPasswordField(5);

    // Retype Password
    lblRetype = new JLabel("Repeat Password:");
    txtRetype = new JPasswordField(5);

    // ID
    lblID = new JLabel("ID:");
    txtID = new JTextField(5);

    // Permission
    lblPermission = new JLabel("Permission");
    txtPermission = new JTextField(5);

    //Empty Labels
    lblX1 = new JLabel("");
    lblX2 = new JLabel("");
    lblX3 = new JLabel("");
    lblX4 = new JLabel("");



    // Top Panel - adding elements 
    pnlTop.add(lblUserName);
    pnlTop.add(lblX1);
    pnlTop.add(txtUserName);


    pnlTop.add(lblPassword);
    pnlTop.add(lblX2);
    pnlTop.add(txtPassword);

    pnlTop.add(lblRetype);
    pnlTop.add(lblX2);
    pnlTop.add(txtRetype);


    pnlTop.add(lblID);
    pnlTop.add(lblX3);
    pnlTop.add(txtID);


    pnlTop.add(lblPermission);
    pnlTop.add(lblX4);
    pnlTop.add(txtPermission);

    //  Bottom Panel -- Adding buttons
    pnlBottom = new JPanel(new FlowLayout());
    btnCancel = new JButton("Cancel");
    btnSignUp = new JButton("Sign UP");

    pnlBottom.add(btnCancel);
    btnCancel.addActionListener(this);
    pnlBottom.add(btnSignUp);
    btnSignUp.addActionListener(this);


    // adding focus listeners
    txtID.addFocusListener(this);
    txtPassword.addFocusListener(this);
    txtUserName.addFocusListener(this);
    txtRetype.addFocusListener(this);



    // General Panel - adding top and bottom panels
    pnlGeneral = new JPanel(new BorderLayout());
    pnlGeneral.add(pnlTop,BorderLayout.NORTH);
    pnlGeneral.add(pnlBottom,BorderLayout.SOUTH);

    // Setting size and location of screen
    setContentPane(pnlGeneral);
    setLocation(600, 400);
    setVisible(true);
    pack();

this is the complete code, in a different class. At the moment I add lblX1 to pnlTop, the grid breaks.

I've tried to change the number of rows/columns but without any success with it and I would really appreciate any help with it.

Image of the current situation with 3 columns:

enter image description here

Basically I want it to look like this

| Username:        | _____ |  |    
| Password:        | _____ |  |
| Repeat Password: | _____ |  |
| ID:              | _____ |  |
| Permission       | _____ |  |

Near each text field from the right, will be added an red X (that's why I left an open space ) by any condition I do ( already have the function but they not relevant to this problem )

Solution

  • Here:

    pnlTop=new JPanel(new GridLayout(0,2));

    That creates a "grid" for two columns.

    But you keep adding:

    // Top Panel - adding elements 
pnlTop.add(lblUserName);
pnlTop.add(lblX1);
pnlTop.add(txtUserName);

    three columns. I would start by something like:

    // Top Panel - adding elements 
pnlTop.add(lblUserName);
pnlTop.add(txtUserName);

    I assume you intend to use these lblX... to control horizontal "gapping". But if you do that, you have to go with a 3 column grid!

    But the real answer is to study the possibilities of the grid layout, as that should allow you to control column widths in different ways. Like playing with hgap and vgap settings (see the "official" documentation for some ideas).

    Meaning: use a 2 column grid (as you do right now), and only add two elements per row, and control the "gapping" via the corresponding control mechanisms of the grid layout.

    Final update:

     pnlTop.add(lblX2);

    That one appears twice. Thing is: you want to have 5 rows with 3 columns each. So your grid layout needs to say: 3 columns. And: you should be adding 15 different UI elements then (3 x 5). You have 14, and you are adding your second "separator" twice.