JavaFX, how to prevent Label text resize during ScrollPane focus?

Question

How do I stop the ScrollPane focus from resizing my Labels' text?

I'm making a copy of this car loan calculator in JavaFX.

Almost everything works as intended

Until the ScrollPane gets focus, the title and text on right side gets resized

A brief description of the layout

So, the problem is that my Labels' text is being resized when the ScrollPane gets focus. I've tried fixing this by adjusting properties of the ScrollPane, the layouts contained within the ScrollPane, and the Labels themselves. I also searched if a similar question has been asked before. I've found nothing yet.

Thanks

Edit:

Added some code, I tried to keep it as minimal as possible. If you focus the TextField, all Label text is sized as expected. If you focus the ScrollPane, the big blue text sizes down to match the smaller black text. There is obviously no need for scrolling in this example, but it still shows the issue I have with my project that does require scrolling.

package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.stage.Stage;

public class Main extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage)
    {
        Stage stage = primaryStage;

        HBox myHBox = new HBox();

        Label smallerText = new Label("this is small\ntext");
        smallerText.setStyle("-fx-font-weight: bold");
        smallerText.setTextFill(Color.web("#000000"));
        smallerText.setFont(Font.font("Leelawadee UI", FontPosture.REGULAR, 12));

        Label biggerText = new Label("this is big\ntext");
        biggerText.setStyle("-fx-font-weight: bold");
        biggerText.setTextFill(Color.web("#005FBA"));
        biggerText.setFont(Font.font("Leelawadee UI", FontPosture.REGULAR, 24));

        TextField myTextField = new TextField();

        myHBox.getChildren().addAll(smallerText, biggerText);

        VBox myVBox = new VBox();
        myVBox.getChildren().addAll(myHBox, myTextField);

        ScrollPane myScrollPane = new ScrollPane(myVBox);
        myScrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);
        myScrollPane.setVbarPolicy(ScrollBarPolicy.ALWAYS);

        Scene scene = new Scene(myScrollPane);
        stage.setScene(scene);
        stage.show();
    }

}

Edit again:

Problem has been solved. Thank you! :)

Answer 1

As suspected, something is effecting from the default CSS file implementation. You should definitely raise a JIRA ticket regarding this.

But for time being you can fix the issue, by moving all your style declaration to a css file. And everthing works as expected.

Below is what I had done.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class FontResizeIssueOnFocus extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        Stage stage = primaryStage;
        HBox myHBox = new HBox();

        Label smallerText = new Label("this is small\ntext");
        smallerText.getStyleClass().add("smaller-text");

        Label biggerText = new Label("this is big\ntext");
        biggerText.getStyleClass().add("bigger-text");

        TextField myTextField = new TextField();
        myHBox.getChildren().addAll(smallerText, biggerText);

        VBox myVBox = new VBox();
        myVBox.getChildren().addAll(myHBox, myTextField);

        ScrollPane myScrollPane = new ScrollPane(myVBox);
        myScrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);
        myScrollPane.setVbarPolicy(ScrollBarPolicy.ALWAYS);

        Scene scene = new Scene(myScrollPane);
        scene.getStylesheets().add(getClass().getResource("scrollpanefontissue.css").toString());
        stage.setScene(scene);
        stage.show();
    }
}

And in the css file...

.smaller-text{
  -fx-font-weight:bold;
  -fx-text-fill:#000000;
  -fx-font-family: "Leelawadee UI";
  -fx-font-size:12px;
}
.bigger-text{
  -fx-font-weight:bold;
  -fx-text-fill:#005FBA;
  -fx-font-family: "Leelawadee UI";
  -fx-font-size:24px;
}

Alternately, if you are not interested in css file implementation, you can declare using inline css. This will also fix your issue.

Label smallerText = new Label("this is small\ntext");
smallerText.setStyle("-fx-font-weight: bold;-fx-text-fill:#000000;-fx-font-family:\"Leelawadee UI\";-fx-font-size:12px;");

Label biggerText = new Label("this is big\ntext");
biggerText.setStyle("-fx-font-weight: bold;-fx-text-fill:#005FBA;-fx-font-family:\"Leelawadee UI\";-fx-font-size:24px;");

Answer 2

In my case I can't fix it via CSS, because I have to use computed padding value and utilizing something like setStyle() inside a listener is way too ugly. This is an obvious bug caused by the requestLayout() method which is set/called via ScrollPaneBehavior here. When scroll pane receives focus it also somehow removes any inherited and content styles. So I've fixed this by stopping mouse event propagation:

scrollPane.setOnMousePressed(Event::consume);
scrollPaneContentNode.setOnMousePressed(Event::consume);