6 Replies Latest reply: Jan 11, 2013 7:04 AM by svanimpe RSS

    Center a button's graphic

    svanimpe
      Can anyone tell me how to get the graphic for a button to center (vertically) in front of the text ?

      I currently do the following:
      Button myButton = new Button("Save");
      myButton.setGraphic(saveGraphic);
      and use CSS to set:
      -fx-graphic-text-gap: 1em;
      The resulting button has the text "Save" centered vertically (equal space above and below the text), but the icon seems to have less space above it then below it.
      What I'd like is to have the center of the graphic aligned with the baseline of the text.
      How can I achieve this ?
        • 1. Re: Center a button's graphic
          jsmith
          Does button.setContentDisplay(ContentDisplay.CENTER) do what you want?
          import javafx.application.Application;
          import javafx.event.*;
          import javafx.scene.Scene;
          import javafx.scene.control.*;
          import javafx.scene.image.*;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;
           
          public class CenterGraphic extends Application {
            public static void main( String[] args ) { Application.launch(args); }
          
            @Override
            public void start(Stage stage) {
              ImageView image = new ImageView(new Image("http://icons.iconarchive.com/icons/mybaco/baco-flurry-2/128/FaceTime-icon.png"));
          
              Button button = new Button("Open pod bay doors");
              button.setGraphic(image);
              button.setContentDisplay(ContentDisplay.CENTER);
              button.setStyle("-fx-text-fill: firebrick; -fx-font-weight: bold;");
              button.setOnAction(new EventHandler<ActionEvent>() {
                @Override public void handle(ActionEvent t) {
                  System.out.println("I'm sorry, I can't do that.");
                }
              });
          
              StackPane layout = new StackPane();
              layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 20px;");
              layout.getChildren().add(button);
          
              stage.setScene(new Scene(layout));
              stage.show();
            }
          }
          • 2. Re: Center a button's graphic
            svanimpe
            No, this places the graphic in the center of the button (horizontally).
            I want to keep it to the left of the text, but centered vertically.
            • 3. Re: Center a button's graphic
              jsmith
              I want to keep it to the left of the text, but centered vertically.
              But that's the default behaviour - ContentDisplay.LEFT -> I don't see what the issue is.
              • 4. Re: Center a button's graphic
                svanimpe
                @jsmith: I want to center the graphic VERTICALLY, to the left of the text. Right now the graphic has more space below it than above it, while the text is neatly centered (vertically). I just looks weird and malaligned.

                I guess I should just try this with other kinds of graphics as well, and see if the problem exists there as well. If so, I'll file it as a bug.
                • 5. Re: Center a button's graphic
                  jsmith
                  I guess I should just try this with other kinds of graphics as well, and see if the problem exists there as well.
                  Try running the sample program I included in my answer and removing the ContentDisplay setting - for me (OS X jdk8b71), the graphic is placed to the left of the text and centered vertically within the button.
                  • 6. Re: Center a button's graphic
                    svanimpe
                    Yes, that works for me too.

                    Maybe it just goes wrong in my special case: my graphic is a label, the text on this label uses a loaded font (FontAwesome) and the size is set via CSS.

                    I'll have some more time to look at this next week, and will make some test cases.