JavaFX Buttonbar Layouting - orientation and space distribution

Question

I have this Buttonbar with some Buttons and a Slider (in SceneBuilder):

Goal

all Buttons on the left, with uniform widths - small spacing - Slider fills remaining width

-> Slider needs to opt out of the ButtonUniformSize using fxml, I only found the programmatic way setButtonUniformSize

I also found this question: JavaFX: Align Buttons inside ButtonBar (using SceneBuilder or fxml) but it's about configuring and aligning the Buttons individually, which I don't want.

In the Screenshot below you can see that the Orientation is set to LEFT_TO_RIGHT and I just can't understand why it aligns from right to left?

This is the relevant part of code generated by the SceneBuilder:

<VBox prefHeight="600.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
  <children>
    <MenuBar VBox.vgrow="NEVER">
      [...]
    </MenuBar>
      <ButtonBar buttonMinWidth="25.0" nodeOrientation="LEFT_TO_RIGHT" VBox.vgrow="NEVER">
        <buttons>
            <Button mnemonicParsing="false" styleClass="stop" />
            <Button mnemonicParsing="false" styleClass="playPause" />
            <Slider styleClass="volume" />
        </buttons>
         <padding>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </padding>
      </ButtonBar>
      <FolderView VBox.vgrow="ALWAYS" />
  </children>
</VBox>

Is there a reason not to put the buttons in the button bar, and the button bar and slider in a `HBox`? That way it would be easy to control the layout of the slider. I don't understand what you are asking about the `nodeOrientation`. `LEFT_TO_RIGHT` is the default and your controls are being laid out from left to right, as expected. — James_D, Oct 30 '17 at 17:00
are they? Why is there empty space on the left then? The reason for a buttonbar is that I want to have all buttons equally wide, and that it defaults to all the values I want, like centering vertically etc — xeruf, Oct 30 '17 at 17:18
The nodes are being laid out left to right: you have the two buttons first, and then the slider, and the buttons are left of the slider. There's empty space on the left because it is aligned right, by default. That has nothing to do with node orientation. I wasn't suggesting removing the button bar; just using it only for the buttons (not the slider). The "FXML way" to call `setButtonUniformSize` would be ``, but I don't know if Scene Builder has a way to set that attribute. — James_D, Oct 30 '17 at 17:24
I don't see any way to change the alignment for a button bar, either in fxml or in Java — James_D, Oct 30 '17 at 17:42

score 0 · Answer 1 · answered Jan 06 '20 at 08:06

As it looks it's a missing feature. The Jfx Project bug tracker does not seem to have any related issue on this.

Instead of

<ButtonBar>
   <buttons>
      <Button text="Button A"/>
      <Button text="Button B"/>
      <Button text="Button C"/>
   </buttons>
</ButtonBar>

simply do a

<HBox>
  <Button text="Button A"/>
  <Button text="Button B"/>
  <Button text="Button C"/>
</HBox>

to get left aligned buttons. This makes especially sense if you intend to use evenly spaced icons and not text for the button text later.

score 0 · Answer 2 · answered Jan 31 '22 at 13:33

I had the same issue, found the solution. You need to add ButtonBar.buttonUniformSize="false" on the field you want to exclude.

Below working example,

<ButtonBar BorderPane.alignment="CENTER">
<buttons>
    <TextField fx:id="txtPrivilegeName" minWidth="500" prefWidth="500" promptText="Privilege name" ButtonBar.buttonData="LEFT" ButtonBar.buttonUniformSize="false"/>
    <Button onAction="#handleAddPrivilege" text="Add" ButtonBar.buttonData="RIGHT"/>
    <Button onAction="#handleRemovePrivilege" text="Remove" ButtonBar.buttonData="RIGHT"/>
</buttons>
<BorderPane.margin>
    <Insets left="10.0" right="10.0" top="10.0"/>
</BorderPane.margin>

JavaFX Buttonbar Layouting - orientation and space distribution

Goal

2 Answers2