Get rid of duplicated border on javafx.scene.control.TextField

问题

I'm working on a TextField and just get a strange "extra border" I can't identify where it is comming from.

My UI looks like this (the extra border is in grey, the ordinary border I painted red in my CSS for debug):

FXML excerpt:

<HBox fx:id="sliderControlPane" styleClass="parameterSliderControlPane"
                    alignment="CENTER" visible="false">
    <Slider fx:id="parameterSliderControl" styleClass="parameterSliderControl"
                        prefWidth="195" />
    <Pane prefWidth="14"/>
    <TextField fx:id="parameterSliderControlValue" styleClass="parameterSliderControlValue" 
                        prefWidth="70"/>
</HBox>

CSS excerpt:

.parameterSliderControlPane {
    -fx-padding: 0.0 5.0 0.0 5.0;
}

.parameterSliderControlValue {
    -fx-border-color: #f00;
    -fx-border-radius: 8.0;
    -fx-font-size: 20.0;
    -fx-padding: 0.0 4.0 0.0 4.0;
    -fx-alignment: center-right;
}

.parameterSliderControl .track {
    -fx-padding: 4.0;
}

.parameterSliderControl .thumb {
    -fx-border-color: #aaa;
    -fx-border-radius: 12.0;
    -fx-background-color: #fff;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-padding: 14.0;
}

I don't think it is related, but for information, I keep track of consistency between the slider and the text field adding a listener to the text field, to update slider value or rollback text field value according to the input in the text field:

@Override
public void initialize(URL location, ResourceBundle resources) {
    (...)
    this.parameterSliderControlValue.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
        if (!isNowFocused) {
            (...)
            //check wether input is valid
            //if yes, update slider value with text field value
            //if no, update text field value with slider value
        }
    }
}

I can't understand why this extra border is popping out in the background of the text field border. Does it come from the text field and I am supposed to set some parameter to hide it? Or it does come from another UI element I can't figure out?

I couldn't find any suspected parameter at official JavaFX CSS reference page (https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html)

Thank you!

回答1:

As of @fabian comments, it turned out to be due to default theme (modena.css), which I found in the following link:

gist.github.com/maxd/63691840fc372f22f470

Line 1266 defines .text-input entry, which was responsible for the duplicated border. It does not define border parameters directly, but indirectly generates the extra border by background related parameters:

.text-input {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}

Solution to my particular case was to override -fx-background-color in my CSS. The final CSS is, though:

.parameterSliderControlValue {
    -fx-border-color: #f00;
    -fx-border-radius: 8.0;
    -fx-font-size: 20.0;
    -fx-padding: 0.0 4.0 0.0 4.0;
    -fx-alignment: center-right;
    -fx-background-color: transparent; //this line has been added to solve the problem
}

来源：https://stackoverflow.com/questions/46355643/get-rid-of-duplicated-border-on-javafx-scene-control-textfield

标签

java

css

javafx-8

border

textfield