javafxbuttonbar

ButtonBar: Same Button Height

I have an app with a very dynamic button bar of about one to twelve or so buttons that change text and functionality with the current screen and/or selected record. I'm using a ButtonBar to display them.

The buttons in the bar wrap their text, when it's too large, as they should, but I end up with this dumb situation:

enter image description here

The buttons are different heights! I would like the ButtonBar to give me well-regulated buttons, like so:

enter image description here

I can cheat, after a fashion by splitting each button up into three lines. This creates a situation where the small buttons are swimming in space:

enter image description here

(If I use two lines, I get less wasted space, which is good, but the single-line text ceases to be centered, which also looks awful.)

Right now, the only thing I can think of to do is, after the bar renders, scan across all the buttons for the tallest one, and then adjust every other button accordingly. The ButtonBar does with width, which is good (but actually probably less desirable than all the buttons being the same height). The misleadingly named "UniformButtonSize" does this.

I'm wondering if I can do this with CSS somehow, maybe setting button heights as a percentage. Any suggestions would be appreciated!

Solution

  • This is a little tacky but it seems to do the trick:

        public void adjustButtons() {
        var tallest = 0.0;
        for (Node n : buttonBar.getButtons()) {
            var ht = ((Button) n).getHeight();
            if (tallest < ht) tallest = ht;
        }
        for (Node n : buttonBar.getButtons()) {
            ((Button) n).setMinHeight(tallest);
        }
    }

    So, any time the buttons in the button bar change, you fire this, it finds the tallest button, then it goes and sets all the buttons to that height.

    Comments?