Why does my UI lose formatting when run in-browser vs run on my computer (Java Swing)?

Question

For my CSE 205 (Java programming 2) class, we have to design a really simple GUI applet. I'm pretty familiar with Swing, having used it for a few of my own projects before hand. I've designed the program with few problems, and it looks perfect on my computer when run from Eclipse:

But when I got to submit it online, where it runs in browser, the UI gets severely demented, returning back to default:

I've grown accustomed to using the GridBagLayout due to it's simplicity. That's what I am using here. The classes CreatePanel and SelectPanel (as seen in the first image) both extend JPanel (as per my professor). I set each using:

this.setLayout(new GridBagLayout());

And and the components to each by:

//Call the method addItem() to add the create button to the panel
addItem(this, createB,0,2,2,1,defaultInset,GridBagConstraints.CENTER);



 //-------
    public void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int[] inset, int align)
      {
            GridBagConstraints gc = new GridBagConstraints();
            gc.gridx = x;
            gc.gridy = y;
            gc.gridwidth = width;
            gc.gridheight = height;
            gc.weightx = 0;
            gc.weighty = 0;
            gc.insets = new Insets(inset[0],inset[1],inset[2],inset[3]);
            gc.anchor = align;
            gc.fill = GridBagConstraints.NONE;
            p.add(c, gc);
        }

Anyone have any ideas of what might be going on? Considering over half my time was spent getting the layouts looking right, I'd love a simple fix. I can post more code if needed. Thanks for any suggestions.

--EDIT--

Alright I've done a bit of playing around based on @ MadProgrammer's suggestions. I think I've kind of narrowed down where the problem is.

This is the code I am using to set the size of the JTextField to the right of the label "Enter a Pet Type:

petTypeTF = new JTextField("");
petTypeTF.setPreferredSize(new Dimension(125, 60));

Now if I change the code to anything else, like setting the number of columns:

petTypeTF = new JTextField("",12);
 petTypeTF.setPreferredSize(new Dimension(125, 60));

I get a UI that looks identical to the one when I submit it online. Something to do with setting the number of columns seems to be screwing it up. Does this help narrow it down for anyone?

Answer 1

There's really not enough code to ascertain the full extend of the problem, but a few ideas might help.

GridBagLayout will want to try and get it's components to laid out based on there preferred sizes if possible. If it can't it will look at there minimum size instead.

Make sure you are creating your text components with columns (and in the case of the text area) rows. This will establish the preferred size of the components automatically based on a number of important factors.

public class BadLayout11 {

    public static void main(String[] args) {
        new BadLayout11();
    }

    public BadLayout11() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (Exception ex) {
                }

                JTabbedPane pane = new JTabbedPane();
                pane.add("Pet List Creation", new TestPane());

                JFrame frame = new JFrame("Test");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(pane);
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);

            }
        });
    }

    public class TestPane extends JPanel {

        public TestPane() {

            setLayout(new GridBagLayout());

            JPanel fields = new JPanel(new GridBagLayout());

            JTextField field = new JTextField(12);
            JTextArea area = new JTextArea(10, 20);
            JLabel label = new JLabel("Enter a Pet Type");
            JButton button = new JButton("Create a Pet");

            GridBagConstraints gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.insets = new Insets(2, 2, 2, 2);
            gbc.anchor = GridBagConstraints.WEST;

            fields.add(label, gbc);
            gbc.weightx = 1;
            gbc.gridx++;
            fields.add(field, gbc);

            gbc.fill = GridBagConstraints.NONE;
            gbc.gridx = 0;
            gbc.weightx = 0;
            gbc.gridy++;
            gbc.gridwidth = 2;
            gbc.anchor = GridBagConstraints.CENTER;
            fields.add(button, gbc);

            gbc = new GridBagConstraints();
            gbc.gridx = 0;
            gbc.gridy = 0;
            gbc.insets = new Insets(2, 2, 2, 2);
            gbc.gridheight = GridBagConstraints.REMAINDER;
            gbc.weightx = 1;
            gbc.weighty = 1;
            gbc.fill = GridBagConstraints.BOTH;
            add(fields, gbc);
            gbc.gridx++;
            add(new JScrollPane(area), gbc);

        }

    }

}

Unfortunately, at some point, everything will reach a point that it is simply not possible to maintain the layout and things will either collapse or simply appear clipped.

In these cases, you could place the entire container within a JScrollPane, but I'd consider that a worst case scenario in this case.