JavaFX TextField resize with monospace font

Question

I want to make a TextField that automatically resizes to the size of its content. If I use textField.prefColumnCountProperty().bind(textField.textProperty().length()); it works. But as soon as I use a monospaced font the TextField resizes but the text is invisible until I select it. How can I use the resize property with a monospaced font?

Before selecting the text:

After selecting the text:

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

Controller.java

package sample;

import javafx.fxml.FXML;
import javafx.scene.control.TextField;


public class Controller {

    @FXML
    private TextField textField;

    @FXML
    public void initialize() {
        textField.setStyle("-fx-font-family: 'monospaced';");
        textField.prefColumnCountProperty().bind(textField.textProperty().length());
    }

}

sample.fxml

<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.control.TextField?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
        <TextField fx:id="textField"></TextField>
</GridPane>

Answer 1

Short:

The problem only occurs when getAlignment() is set to left (BASELINE_LEFT, BOTTOM_LEFT, CENTER_LEFT or TOP_LEFT) so just use textField.setAlignment(Pos.CENTER);.

---

Long answer since this is still a strange behavior:

The text is positioned incorrectly, all the text is moved to the left out of the visible area. It seems like the cause of this behavior is that the width of the textfield is to small.

This is a small example where the text "test" is typed and then moves the cursor to the left.

---

Well i guess it's a problem how TextFieldSkin.computePrefWidth works, since it doesn't calculate the size of the cursor.

You could create your own TextFieldSkin which computePrefWidth returns a bigger value: (This code-sample uses com.sun.javafx.scene.control.skin.TextFieldSkin.TextFieldSkin for Java-8)

textField.setSkin(new TextFieldSkin(textField){
    @Override
    protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
        return 1 + super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset);
    }
});

You could also one to the prefColumnCount

textField.prefColumnCountProperty().bind(textField.textProperty().length().add(1));

---

Also see: What is the prefColumnCount property for a TextField?