TextField - Right button of overlaps with textfield border

[Exopandora]

System: JMetro 11.6.14 Windows 10 Pro 20H2 Java 15.0.1 (eclipse) JavaFX 16 Resolution: 1440p Scaling: 125%

Issue: The background of the right button overlaps with the border of the textfield: How its supposed to look:

Potential fixes:

1. Make the background of the button transparent. This requires the following changes in base.css:

   .text-field > .right-button {
   -fx-cursor: default;
   
   -fx-background-insets: -0.3333333em -0.5833333em -0.3333333em -0.5833333em; /* 4 7 4 7 px in em */
   -fx-background-color: transparent;
   }

   There is a comment in the file that states you need to give the button a color in order for it to react to mouse inputs. But with setup it works just fine with transparent color. Note that this fix also allows increasing the size of the button to match the full dimensions of the textfield.

2. Decrease the size of the button such that it no longer overlaps with the border of the textfield. This requires the following changes in base.css:

   .text-field > .right-button {
   -fx-cursor: default;
   
   -fx-background-insets: -0.0833333em -0.3333333em -0.0833333em -0.3333333em; /* 4 7 4 7 -> this values are subtracted by 3px in em because of the border of the textfield */
   -fx-background-color: background_focused_color;  /* We must give it a color so that it reacts to the mouse */
   }

   A side effect of this fix ist that the hitbox of the button decreases slightly.

[Exopandora]

I just noticed that the first fix doesnt really work, as the text goes behind the button. Maybe the text can be fixed in another way. And the second fix leaves a 1px gap when pressing the button on a password field. :/ EDIT: A workaround for the first issue is to add padding to the text on the right. (Windows settings search bar also does this). I still struggle to align the button to the right though. EDIT2: Changes in TextFieldWithButtonSkin.java

@Override
protected void layoutChildren(double x, double y, double w, double h) {
    super.layoutChildren(x, y, w, h);

    final double clearGraphicWidth = snapSizeX(rightButtonGraphic.prefWidth(-1));
    final double clearButtonWidth = rightButton.snappedLeftInset() + clearGraphicWidth + rightButton.snappedRightInset();

    rightButton.resize(clearButtonWidth, h);
    positionInArea(rightButton,
            (x+w) + textField.snappedLeftInset() + textField.snappedRightInset() - (h + textField.snappedTopInset() + textField.snappedBottomInset()), y,
            clearButtonWidth, h, 0, HPos.CENTER, VPos.CENTER);
}

Changes in base.css:

.text-field {
    -fx-padding: 0.3333333em 3em 0.3333333em 0.5833333em;
}

Those changes still need to be implemented for the password textfield but it would fully fix the issue

[dukke]

Hello again @Exopandora

Thanks for the suggestions. The core idea of your fix seems sound (your last comment). Would you care to file a PR please, against the master branch. That way you'll also permanently appear in the list of contributors of this project.

Some comments though (will be better to comment further in the PR itself so you can file the PR anyways):

• why are we changing the padding of the textfield itself?
• we can probably remove the -fx-background-insets in the .text-field > . right-button rule in the base.css stylesheet because that was made exactly to prevent the button from overlapping the textfield border. The problem was that it didn't account for changes in scaling etc, so your idea seems like a better way.
• Why do you add the left and right insets as well as the top and bottom insets. Would it suffice to just add left insets and top insets respectively?

Anyways better to file the PR and continue the discussion there instead of continuing the discussion here (the PR interface lends itself better to these types of discussions).

[dukke]

I just remembered that actually this needs to be solved in the FXSkins project: https://github.com/dukke/FXSkins

I'm planning to integrate JMetro with FXSkins (JMetro will start using FXSkins). All skins will then be part of FXSkins, there will be no skins in JMetro.

[dukke]

Closing this issue has it has been fixed in FXSkins