CODEWITHSUNDEEP
javacssjavafxjavafx-2javafx-8
chandra kishore
chandra kishore

Reputation: 31

JavaFX - Set Different Backgrounds for contents of Different TextArea

I'm a newbie in JavaFX. How to set different background colors for the contents of different TextAreas. As far as I know , using CSS, I can set background color like

.text-area {
    -fx-background-color: transparent;
    -fx-text-box-border: gray;
}

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

But it is affecting both TextAreas.

Also what is the background color of the disabled TextArea in JavaFX and how can I modify it?

TextArea textarea = new TextArea();
TextArea textarea1 = new TextArea();

These are the attributes I have applied

 textarea1.setMaxHeight(180);
 textarea1.setMaxWidth(500);
 textarea.setEditable(false);
 textarea.setPrefRowCount(15);
 textarea.setWrapText(true);
 textarea.setStyle("-fx-background-color: transparent");
 textarea1.setStyle("-fx-background-color: tomato");

Upvotes: 1

Views: 1237

Answers (2)

fabian
fabian

Reputation: 82491

You can introduce a custom variable in CSS to determine the color.

When a TextArea is disabled, the opacity of the TextArea and children is set to 0.4 (=40%). You can undo this by overwriting the property in your stylesheet, if you wish.

.text-area {
    /* use variable as inner background */
    -fx-control-inner-background: content-background;
}

/* keep element fully opaque, when disabled */
.text-area:disabled,
.text-area *:disabled {
    -fx-opacity: 1;
}

/* replace inner background with darker color, when disabled */
.text-area:disabled {
    -fx-control-inner-background: derive(content-background, -40%);
}

// set content-background from inline style
textarea.setStyle("content-background: transparent;");
textarea1.setStyle("content-background: tomato;");

In case you do not need the color to determine the -fx-control-inner-background based on your chosen color (the derive part), you could also simply assign the property from inline style. In this case you do not need the CSS rules for the background in your stylesheet.

textarea.setStyle("-fx-control-inner-background: transparent;");
textarea1.setStyle("-fx-control-inner-background: tomato;");

Upvotes: 2

Sam Orozco
Sam Orozco

Reputation: 1258

So what you need to do is put this line inside your css page:

.text-area .content {
    -fx-background-color: text-area-background ;
}

So now whatever you set your text-area background to it will set the content back grounf to that. So you should be able to do this below and it will work:

TextArea one = new TextArea();
        TextArea two = new TextArea();
        TextArea three = new TextArea();

        one.setStyle("-fx-background-color: transparent");
        two.setStyle("-fx-background-color: tomato");
        three.setStyle("-fx-background-color: steelblue");

Upvotes: 1

Related Questions