ButtonBar: Same Button Height

Question

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:

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

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:

(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!

This isn't an immediate solution, and I don't know if they'll accept it, but you may want to consider submitting an enhancement request to make "button uniform size" also influence the height of each button rather than just the width. — Slaw, Jul 03 '21 at 23:52
They probably couldn't do that without breaking current code, unless they had a switch for it. Maybe like "setUniformButtonHeight", but off by default. I'll see if I can submit a request. — user3810626, Jul 04 '21 at 01:39
wondering why: the layout is a hbox which should set its children's height to its own if fillheight (defaults to true) - [mcve] please — kleopatra, Jul 04 '21 at 04:08
For each button added to the button bar, does doing `btn.setMaxHeight(Double.MAX_VALUE)` help? — Slaw, Jul 04 '21 at 06:32
@Slaw not really: the actual (always unwanted) outcome depends on the outer layout - if it respects the bar's max, we'll loose the text wrapping, if not it fill the complete height. ButtonBarSkin does somehow modify its hbox behavior: for a plain HBox I can have both same height and text wrapping by setting both button's max to infinite _and_ hbox' max to usePref. Doing the same for bar's max doesn't work .. — kleopatra, Jul 04 '21 at 12:43
@Slaw forgot: you nailed the problem though - labeledskin returns prefHeight in computeMax, thus effectively maxing the height to pref for all layouts that respect max. — kleopatra, Jul 04 '21 at 13:23

score 0 · Accepted Answer · answered Nov 13 '21 at 03:28

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?

ButtonBar: Same Button Height

1 Answers1