Is there any way of hiding the text field of a spinner on JavaFX?

Question

I'm working on a java/javaFX application where I need to use a component like a spinner to give the user the possibility of increasing/decreasing by 1 unit a certain property. It's already implemented and working as I need. However, the ideal would be to hide the text field as it's not helpful at all.

Does anyone know a way to hide it or an alternative component that could work similarly?

Thank you

Answer 1

This code appears to accomplish what you want.

.spinner .text-field {
    visibility: hidden;
    -fx-pref-width: 2em;
    -fx-pref-height: 2.5em;
}

It is a hack using CSS though. A better solution might be to create a custom skin or a custom control, but I won't try that here. Perhaps the hack will suffice for your purposes.

The weird thing about the hack is that setting the pref width and height of the hidden text field will allow the arrows to be visible (if you just set pref width and height of the text field to zero, then the arrows aren't visible either).

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

public class HiddenTextSpinner extends Application {

    private static final String NO_TEXT_SPINNER_CSS = """
            data:text/css,
            .spinner .text-field {
                visibility: hidden;
                -fx-pref-width: 2em;
                -fx-pref-height: 2.5em;
            }
            """;

    @Override
    public void start(Stage stage) {
        Spinner<Integer> spinner = new Spinner<>(0, 10, 5);
        spinner.getStylesheets().add(NO_TEXT_SPINNER_CSS);
        spinner.setEditable(false);

        VBox layout = new VBox(10, spinner);
        layout.setPadding(new Insets(10));
        Scene scene = new Scene(new VBox(layout));
        stage.setScene(scene);
        stage.show();
    }

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