JavaFX, How to Resize a Checkbox?

Question

I can't seem to resize a check box, regardless of using width/height, minWidth/minHeight or maxWidth/maxHeight. Changing the min width only seems to effect the nodes padding

package checkboxtest;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class CheckBoxTest extends Application {

    @Override
    public void start(Stage primaryStage) {

        CheckBox checkBoxResize = new CheckBox("Resize");
        checkBoxResize.setMinWidth(300);
        checkBoxResize.setMinHeight(300);

        CheckBox checkBoxNoResize = new CheckBox("No Resize");

        StackPane root = new StackPane();
        root.getChildren().add(checkBoxResize);
        root.getChildren().add(checkBoxNoResize);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello Checkbox!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Have you tried with CSS ? [Possibly related answer.](http://stackoverflow.com/questions/12038179/javafx-2-0-how-to-change-the-size-of-the-radio-buttons-circle-with-css) — Spotted, Aug 22 '16 at 11:57

James_D · Answer 1 · 2016-08-22T14:09:17.007

The "box" and "mark" (i.e. check mark or tick) in a check box are determined by CSS. Both are rendered as regions with padding to determine their sizes; the mark uses a SVG shape to render the check mark. So to change the size, you need to change the padding applied to these.

The defaults, from modena.css, are

.check-box > .box {
    /* ... */
    -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
}
.check-box > .box > .mark {
    /* ... */
    -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
    -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
}

So to increase the size by a factor of 12, you can use:

.big-check-box > .box {
    -fx-padding: 2em 2em 3em 3em ;
}
.big-check-box > .box > .mark {
    -fx-padding: 5em 5em 6em 6em; 
}

The following SSCCE, with the above CSS (second code block) in a file "big-check-box.css":

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BigCheckBox extends Application {

    @Override
    public void start(Stage primaryStage) {
        CheckBox checkBox = new CheckBox("Regular");
        CheckBox bigCheckBox = new CheckBox("Big");
        bigCheckBox.getStyleClass().add("big-check-box");
        VBox root = new VBox(5, checkBox, bigCheckBox);

        root.setPadding(new Insets(20));
        Scene scene = new Scene(root);
        scene.getStylesheets().add("big-check-box.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

gives

I like it but I was looking for a straight Java solution. I'm looking for this to be dynamic and trying to control that with CSS would just be a pain, IMO. — , Aug 22 '16 at 17:50
The only way to do this dynamically would be to retrieve the `box` and `mark` via a `lookup` and call `setStyle`: i.e. `checkBox.lookup(".box").setStyle("fx-padding: ...;");`, and similarly with `checkBox.lookup(".mark")`. Or, I haven't tried this, but possibly, `((Region)checkBox.lookup(".box")).setPadding(new Insets(24, 36, 24, 36));` etc. — James_D, Aug 22 '16 at 17:53

JavaFX, How to Resize a Checkbox?

1 Answers1