0

I want to create a chat box style around a TextArea in JavaFX. I have the following code:

        TextArea ta = new TextArea();
        ta.getStyleClass().add("chat-bubble");
        
        VBox vb = new VBox(9);
        VBox.setMargin(ta, new Insets(10,10,10,10));
        vb.getChildren().addAll(ta);

        Scene scene = new Scene(vb, 200, 300);
        scene.getStylesheets().add("resources/ta.css");
        stage.setScene(scene);
        stage.show();

and the following CSS (resources/ta.css):

TextArea {
    -fx-background-insets: 0;
    -fx-background-color: transparent;
}

TextArea .scroll-pane {
    -fx-background-color: transparent;
}

TextArea .scroll-pane .viewport{
    -fx-background-color: transparent;
}

TextArea .scroll-pane .content{
    -fx-background-color: transparent;
}

.chat-bubble {
    -fx-shape: "M334.266,29.302c-4.143,0-7.5,3.358-7.5,7.5v210.632H177.423c-1.656,0-3.266,0.548-4.578,1.559L120,289.717v-34.783c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v50.031c0,2.858,1.625,5.468,4.19,6.73c1.05,0.517,2.182,0.77,3.309,0.77c1.626,0,3.242-0.529,4.579-1.56l62.9-48.472h154.288c4.143,0,7.5-3.358,7.5-7.5V36.802 C341.766,32.659,338.409,29.302,334.266,29.302 M72.884,247.433H15V44.302h272.883c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5H7.5c-4.142,0-7.5,3.358-7.5,7.5v218.132c0,4.142,3.358,7.5,7.5,7.5h65.384c4.142,0,7.5-3.358,7.5-7.5S77.026,247.433,72.884,247.433z";
    -fx-background-color: darkred;
    -fx-padding: 3 3 10 3;
}

VBox {
    -fx-background-color: transparent;
}

But the stroke width of the chat box is too thick:

ChatBox TextArea with CSS styling

I have tried all sorts of tweaks with border-width, stroke-width etc. in CSS and programmatically.

How do I go about setting the stroke width of the -fx-shape path?

0 Answers0