How can I remove the gap when using a JButton as a ComboBoxEditor in the Windows L&F?

Question

I'm trying to use a JButton as an editor within a JComboBox. On Mac OS X this looks fine, but on Windows using the system look and feel, there is an ugly gap left between the JButton editor and the combo button itself:

This is the test code used to produce the dialog:

import java.awt.*;
import java.awt.event.*;

import javax.swing.*;


public class ButtonEditorTest implements Runnable {

    String[] items = {"One", "Two", "Three"};

    ComboBoxModel model;

    ButtonEditorTest() {
        // our model, kept simple for the test
        model = new DefaultComboBoxModel(items);

        // create the UI on the EDT
        SwingUtilities.invokeLater(this);
    }

    // creates UI on the event dispatch thread
    @Override
    public void run() {
        JComboBox comboBox = new JComboBox(model);
        comboBox.setEditable(true);
        comboBox.setEditor(new ComboButtonEditor());

        JFrame frame = new JFrame("JComboBox with JButton editor test");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(comboBox, BorderLayout.NORTH);
        frame.setSize(200, 100);
        frame.setVisible(true);
    }

    public static void main(String[] args) throws Exception {
        String lookAndFeelClassName = UIManager.getSystemLookAndFeelClassName();
        UIManager.setLookAndFeel(lookAndFeelClassName);
        new ButtonEditorTest();
    }


    class ComboButtonEditor implements ComboBoxEditor {

        private JButton button = new JButton();
        private Object item;

        @Override
        public void addActionListener(ActionListener arg0) {
            // not needed for UI test
        }

        @Override
        public Component getEditorComponent() {
            return button;
        }

        @Override
        public Object getItem() {
            return item;
        }

        @Override
        public void removeActionListener(ActionListener arg0) {
            // not needed for UI test
        }

        @Override
        public void selectAll() {
            // not needed for UI test
        }

        @Override
        public void setItem(Object item) {
            this.item = item;
            button.setText(item.toString());
        }

    }
}

Answer 1

I think if you change the place of the BorderLayout you add to, to CENTER, like this:

frame.getContentPane().add(comboBox, BorderLayout.CENTER);

It will solve that issue. The button might grow a bit bigger though, but you can solve that by readjusting the size values if necessary.

Answer 2

For some reason the Window LAF is overriding the default layout of the button. This results in the button being narrower. However, the width of the editor is not increased to account for the narrower button so the gap appears. Here is the code from the WindowsComboBoxUI:

protected LayoutManager createLayoutManager() {
    return new BasicComboBoxUI.ComboBoxLayoutManager() {
    public void layoutContainer(Container parent) {
    super.layoutContainer(parent);

    if (XPStyle.getXP() != null && arrowButton != null) {
        Dimension d = parent.getSize();
        Insets insets = getInsets();
        int buttonWidth = arrowButton.getPreferredSize().width;
        arrowButton.setBounds(WindowsGraphicsUtils.isLeftToRight((JComboBox)parent)
      ? (d.width - insets.right - buttonWidth)
      : insets.left,
      insets.top,
      buttonWidth, d.height - insets.top - insets.bottom);
    }
    }
};
}

A better layout might be something like:

comboBox.setUI( new WindowsComboBoxUI()
{
    @Override
    protected LayoutManager createLayoutManager()
    {
        return new BasicComboBoxUI.ComboBoxLayoutManager()
        {
            public void layoutContainer(Container parent)
            {
                super.layoutContainer(parent);

                System.out.println(editor.getBounds());
                System.out.println(arrowButton.getBounds());

//              if (XPStyle.getXP() != null && arrowButton != null)
//              {
                    Dimension d = parent.getSize();
                    Insets insets = getInsets();
                    int buttonWidth = arrowButton.getPreferredSize().width;
                    boolean isLeftToRight = parent.getComponentOrientation().isLeftToRight();

                    arrowButton.setBounds(isLeftToRight
                    ? (d.width - insets.right - buttonWidth)
                    : insets.left, insets.top, buttonWidth, d.height - insets.top - insets.bottom);

                    System.out.println(editor.getBounds());
                    System.out.println(arrowButton.getBounds());

                    Dimension size = editor.getSize();
                    editor.setSize(arrowButton.getLocation().x - 1, size.height);
//              }

            }
        };
    }
});

I added some output to show how the editor width changes before/after the XP adjustment. Also I don't know how to check for the XP LAF since the XPStyle class is not public.

The imports for the LAF:

import javax.swing.plaf.basic.*;
import com.sun.java.swing.plaf.windows.*;