JavaFX CheckBox changes size when clicking other control

user_5900660 0
Viewed 152

When I click the checkbox it changes size, then after it's selected, click another control on the GUI that isn't the checkbox and the checkbox box changes size by about 1px. How can I get this to stop? I have included a gif to show what I mean.

Gif to show error

.check-box {
    -fx-background-radius: 20px;
    -fx-background-color: linear-gradient(to right, #030045, #002869);
    -fx-text-fill: #ffffff;
    -fx-padding: 6px 10px;
}

.check-box > .box {
    -fx-background-radius: 8px;
    -fx-background-color: white;
    -fx-padding: 3px;
}

.check-box:selected > .box > .mark,
.check-box:indeterminate  > .box > .mark {
    -fx-background-color: #030045;
}

Edit: I created a new blank project with no containers (HBox for example) and added the same stylesheet, and I still get the same error, meaning it has to be related to CSS and nothing to do with size of other controls or layouts.

javafx checkbox css
1 Answers

This is due to the traversable nature of the node when the CheckBox is in focus it will highlight the node(Which you cannot see due to CSS).

Below is some sample code in which you can turn on and off the traversable nature of the CheckBox.(I am using the same CSS provided above in my StyleSheet)

Below that is the JavaDoc that tells you more about the setFocusTraversable function

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        VBox vBox = new VBox();
        Scene scene = new Scene(vBox);
        scene.getStylesheets().add(String.valueOf(getClass().getClassLoader().getResource("StyleSheetTest.css")));

        CheckBox checkBox = new CheckBox("Test CheckBox");
        checkBox.setFocusTraversable(false);

        Button button = new Button("Other Control");

        ToggleButton toggleButton = new ToggleButton("FocusTraversable:False");
        toggleButton.setOnAction(event -> {
            if(toggleButton.isSelected()){
                toggleButton.setText("FocusTraversable:True");
                checkBox.setFocusTraversable(true);
            } else {
                toggleButton.setText("FocusTraversable:False");
                checkBox.setFocusTraversable(false);
            }
        });

        vBox.getChildren().addAll(checkBox, button, toggleButton);
        vBox.setAlignment(Pos.CENTER);
        stage.setScene(scene);
        stage.show();
    }
}

JavaDoc:

setFocusTraversable

public final void setFocusTraversable(boolean value)

Sets the value of the property focusTraversable.

Property description: Specifies whether this Node should be a part of focus traversal cycle. When this property is true focus can be moved to this Node and from this Node using regular focus traversal keys. On a desktop such keys are usually TAB for moving focus forward and SHIFT+TAB for moving focus backward. When a Scene is created, the system gives focus to a Node whose focusTraversable variable is true and that is eligible to receive the focus, unless the focus had been set explicitly via a call to requestFocus().

Default value: false

Source: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/Node.html#setFocusTraversable-boolean-

user_83591070
Related