Jfoenix: JFXTextField CSS v1.7

[rfenters95]

Hello,

I am trying to set the -jfx-unfocus-color color value for an JFXTextField in CSS, but when I open the app only the bottom line changes color. However -jfx-focus-color also changes the floating label text. While trying to work around this issue, I found that by setting -fx-prompt-text-fill from the .text-field class and -fx-background-color from the .text-field .input-line I was able to get the desired unfocused state, but when attempting to change the "unfocused" state at runtime via swapping stylesheets the floating label does not update (as seen in image 4).

main.css

.jfx-text-field
{
    -jfx-focus-color: #4eb769;
    /*-jfx-unfocus-color: #fffd8c; doesn't work*/
}

.text-field
{
    -fx-prompt-text-fill: #fffd8c; /*Yellow - floating label*/
    -fx-text-fill: #fffd8c; /*Yellow - input color*/
    -fx-highlight-fill: #4eb769; /*Green*/
}

.text-field .input-line
{
    -fx-background-color: #fffd8c; /*Yellow - bottom bar*/
}

error.css

.jfx-text-field
{
    -jfx-focus-color: red;
}

.text-field
{
    -fx-prompt-text-fill: red;
    -fx-text-fill: red;
}

.text-field .input-line
{
    -fx-background-color: red;
}

sample.java

textField.getStylesheets().clear();
textField.getStylesheets().add("error.css");

[jfoenixadmin]

Hello,
can you double check _error.css_ file and make sure it doesn't have some cascading styling regarding the JFXTextField focused color. as we were not able to reproduce the issue when applying the provided _error.css_ file.

Regards,

[rfenters95]

That is the entire _error.css_ file.

_main.css_ with only (removed all other css in file, for demo)

.jfx-text-field
{
    -jfx-focus-color: #4eb769;
    -jfx-unfocus-color: #fffd8c;
}

yields this (unfocused)

at runtime I use this java code to change the stylesheet based on whether or not it's value is in a certain range.

textField.getStylesheets().clear();
textField.getStylesheets().add("error.css");
````

_error.css_ with only (removed all other css in file, for demo)
```css
.jfx-text-field
{
    -jfx-focus-color: red;
    -jfx-unfocus-color: red;
}

yields this (unfocused)

in the first 4 images I was able to alter the color of the floating label at runtime by changing the -jfx-focus-color, however -jfx-unfocus-color did not work. The only way I could get it to change while unfocused was to change the -fx-prompt-text-fill in the .text-field class initially, but once that value was set I was unable to change it.

[rfenters95]

Update: I managed to come up with a work around to my problem.

All I did was remove jfoenix:1.7.0 and download jfoenix:1.6.0. My CSS files remain the same as they were in my first post.

-jfx-unfocus-color property still only changes the color of the line under the input, while -jfx-focus-color changes the color of the line under the input and the prompt text.

_main.css_ using maven jfoenix:1.6.0 (only css in file)

.jfx-text-field
{
    -jfx-focus-color: #4eb769;
    -jfx-unfocus-color: #fffd8c;
}

Yields the two images below:

1. Unfocused (not typing)
   

1. Focused (typing)
   

_error.css_ using maven jfoenix:1.6.0 (only css in file)

.jfx-text-field
{
    -jfx-focus-color: red;
    -jfx-unfocus-color: red;
}

Yields the two images below:

1. Unfocused (not typing)
   

1. Focused (typing)
   

However my original files where I set -fx-prompt-text-fill in the .text-field class and -fx-background-color in the .text-field .input-line class, now at version 1.6.0, yield the desired result at runtime.

_main.css_ using maven jfoenix:1.6.0 (only css in file)

.jfx-text-field
{
    -jfx-focus-color: #4eb769;
}

.text-field
{
    -fx-prompt-text-fill: #fffd8c; /*Yellow - floating label*/
    -fx-text-fill: #fffd8c; /*Yellow - input color*/
    -fx-highlight-fill: #4eb769; /*Green*/
}

.text-field .input-line
{
    -fx-background-color: #fffd8c; /*Yellow - bottom bar*/
}

Yields:

_error.css_ using maven jfoenix:1.6.0 (only css in file)

.jfx-text-field
{
    -jfx-focus-color: red;
}

.text-field
{
    -fx-prompt-text-fill: red;
    -fx-text-fill: red;
}

.text-field .input-line
{
    -fx-background-color: red;
}

Yields:

[jfoenixadmin]

Hello,
We were able to reproduce the issue, will fix updating prompt text fill when loading different css. however you still need to use the java css -fx-prompt-text-fill property in order to change prompt text fill.

Regards,