Using a JavaFX TextArea, how to increase fontsize without increasing scrollbar size?

Question

How can I increase the fontsize in a JavaFX TextArea without increasing the size of the scrollbar?

The following example shows an enormous scrollbar. I would like it to remain the normal scrollbar size

public class TextAreaProblem extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        TextArea textArea = new TextArea(text);
        textArea.setWrapText(true);

        textArea.setStyle("-fx-font-size: 50");

        Scene scene = new Scene(textArea, 400, 400);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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



    String text = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?";

}

Answer 1

I don't have a full understanding of why this is, but if you set the font size in em it works without affecting the size of the scroll bar:

textArea.setStyle("-fx-font-size: 4em;");

For a (partial) explanation, the default stylesheet modena.css has the following comment:

RESIZING FOR DIFFERENT SCREEN DPI

When the screen DPI changes Windows will use a different font size by default. The default is 12px and can change to 15px or 18px depending on user preference or screen DPI. On Mac the default is 13px and embedded will depend on hardware. To make UI controls scale and be the right proportions for each of these font sizes we base the padding (which controls size of control) on the font size. This is done using the CSS measurement unit of a "em" where (1em = font size).

The size of the scrollbar is controlled by specifying padding in em, for example the default stylesheet contains:

.scroll-bar:vertical > .increment-button > .increment-arrow {
    -fx-padding: 0.167em 0.333em 0.167em 0.333em; /* 2 4 2 4 */
    -fx-shape: "M7.071,1L8.5,1.002L4.5,4l-4-2.998L1.93,1L4.5,2.976L7.071,1z";
    -fx-effect: dropshadow(two-pass-box , -fx-shadow-highlight-color, 1, 0.0 , 0, 1.4);
}

So what I think is happening is that when you specify the font size in pixels for the text area with

textArea.setStyle("-fx-font-size: 50");

you change the definition of 1em for the text area to be 1em=50px, making the scroll bar button have padding of approximately 17 pixels high and 33 pixels wide. My guess is that specifying the font size in em just scales the size of the font but doesn't change the definition of em (you could hardly define 1em=4em...), so doing it this way doesn't affect the size of the scroll bar.