Limit TextField's text area (margins/padding)

Question

I'm using some TextFields in JavaFX, and I want to limit their area of shown text. I already limit their maximum number of characters, but in some cases, the maximum char number typed is larger than the Textfield's width. As you see, the text is overlapping a custom Erase-text button I added.

I want to know if I can move the text's right margin a little bit to the left (without changing the TextField's properties - size, coordinates), so the button and the text won't overlap anymore.

I already tried margins, padding, but they don't do what I need.

How do I limit my TextField's maximum length (from stackoverflow):

public class LimitedJFXTextField extends JFXTextField {

    private final IntegerProperty maxLength;

    public LimitedJFXTextField() {
        super();
        this.maxLength = new SimpleIntegerProperty(-1);
    }

    public IntegerProperty maxLengthProperty() {
        return this.maxLength;
    }

    public final Integer getMaxLength() {
        return this.maxLength.getValue();
    }

    public final void setMaxLength(Integer maxLength) {
        Objects.requireNonNull(maxLength,
                "Max length cannot be null, -1 for no limit");
        this.maxLength.setValue(maxLength);
    }

    @Override
    public void replaceText(int start, int end, String insertedText) {
        if (this.getMaxLength() <= 0) {
            // Default behavior, in case of no max length
            super.replaceText(start, end, insertedText);
        } else {
            // Get the text in the textfield, before the user enters something
            String currentText = this.getText() == null ? "" : this.getText();

            // Compute the text that should normally be in the textfield now
            String finalText = currentText
                    .substring(0, start) + insertedText + currentText
                    .substring(end);

            // If the max length is not excedeed
            int numberOfexceedingCharacters = finalText.length() - this
                    .getMaxLength();
            if (numberOfexceedingCharacters <= 0) {
                // Normal behavior
                super.replaceText(start, end, insertedText);
            } else {
                // Otherwise, cut the the text that was going to be inserted
                String cutInsertedText = insertedText.substring(
                        0,
                        insertedText.length() - numberOfexceedingCharacters
                );

                // And replace this text
                super.replaceText(start, end, cutInsertedText);
            }
        }
    }
}

Answer 1

Here is a solution using ControlsFX.

import java.io.IOException;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import org.controlsfx.control.textfield.CustomTextField;

/**
 * JavaFX App
 */
public class App extends Application
{

    private static Scene scene;

    @Override
    public void start(Stage stage) throws IOException
    {
        CustomTextField customTextField = new CustomTextField();
        customTextField.setText("Hello World!");

        Label labelX = new Label("x");
        labelX.setTextFill(Color.RED);
        customTextField.setRight(labelX);
        customTextField.setMaxWidth(200);

        scene = new Scene(new StackPane(customTextField), 500, 500);//loadFXML("primary"), 640, 480);
        stage.setScene(scene);
        stage.show();
    }
}

Answer 2

I have never used JFXTextField, so take this answer with a grain of salt.

However, since JFXTextField extends TextField, you should be able to change properties of TextField. One of these is called padding:

So using just the "normal" TextField, you can use this:

public class ExampleApp extends Application {

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

    @Override
    public void start(Stage stage) {
        var textField = new TextField();
        textField.setPadding(new Insets(0, 50, 0, 0)); // This adds 50px right padding
        textField.setText("Hello World!");

        var label = new Label("x");

        var pane = new StackPane(textField, label);
        StackPane.setAlignment(label, Pos.CENTER_RIGHT);

        var scene = new Scene(pane, 500, 500);
        stage.setScene(scene);
        stage.show();
    }
}

Or if you prefer FXML, use this:

<TextField>
    <padding>
        <Insets right="50"/>
    </padding>
</TextField>

The StackPane as well as the Label are just for the sake of demonstrating some overlaying item, same as in Sedricks answer. The important part which actually restricts the text inside of the textfield is the padding.