B4J Question TextArea in yellow with CSSutils

[MarcRB]

Hello,

I think a very basic question.
I'm struggling with textarea black letters on yellow background. Just like a post-it memo.

First I tried a light yellow backcolor at designer properties.
But at runtime it is white.

Then I tried those two lines of code. Both did not result in a yellow textarea.

CSSUtils.SetBackgroundColor(txtMemo, fx.Colors.Rgb(255,242,204))
'or
CSSUtils.SetStyleProperty (txtMemo, "-fx-background-color", "yellow")

Please let me know how I can make it yellow.

Marc

 

[stevel05]

It works here directly in the designer, are you changing any other attributes on the textarea, or using the SetColorAndBorder method on it anywhere that you've forgotten about?

 

[Daestrum]

Works for me too

(Apologies for size of screen grab - 4k monitor has far too many pixels)

 

[stevel05]

Now that is strange, I tried it with your colour : #FFF4F488 and I just get a slight yellow hue around the edge.no colour in the middle.

 

[stevel05]

In fact, anywhere at the top of the picker box in yellow doesn't show.

 

[Daestrum]

#FFF4F488 according to a web search is this colour

(it looks white'ish to me)

 

[stevel05]

#FFF4F400 doesn't appear. #FFF3F300 does

 

[stevel05]

Add it to the Extra CSS box in the designer with: -fx-control-inner-background:#F4F488; and it displays. How weird is that. Although it is targeting a different node I guess. So perhaps, there is your answer.

 

[MarcRB]

Maybe is it because my textarea is on a pane and that pane is on a accordion. I did not try without accordion, yet.

Post#8 Was a solution for the color.
Thanks. I changed the color to FFF2CC because it was a little bit to yellow for me.

As you noticed in post #4, there is also a litte hue. (focus border)
See the images. I would like no border in the textarea.


No focus (grey border)

Has Focus

Wish no border / focus (this image is created by photoshop/paint)

 

[stevel05]

Have you set the border width to 0 in the designer? Also Try adding -fx-focus-color:Transparent;-fx-faint-focus-color:Transparent or whatever colours you prefer to the Extra CSS field. Don't forget a semi colon in between each.

If you're going to do a lot if this fine editing, you'd probably be better adding a stylesheet.

 

[MarcRB]

In the designer the border width was set to 0

your extra css code worked for 'has focus' situation.
For no focus situation I added " -fx-border-color:#FFF2CC;"

-fx-focus-color:Transparent;
-fx-faint-focus-color:Transparent;
-fx-control-inner-background:#FFF2CC;
-fx-border-color:#FFF2CC;

Result:

Thank you.