B4J Question TextArea in yellow with CSSutils

stevel05

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #2

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?

 

Upvote 1

Daestrum

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #3

Works for me too

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

 

Upvote 0

stevel05

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #4

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.

 

Upvote 0

stevel05

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #5

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

 

Upvote 0

Daestrum

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #6

#FFF4F488 according to a web search is this colour (it looks white'ish to me)

 

Upvote 0

stevel05

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #7

#FFF4F400 doesn't appear. #FFF3F300 does

 

Upvote 0

stevel05

Expert

Licensed User

Longtime User

• Aug 23, 2023

• #8

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.

 

Upvote 0

MarcRB

Active Member

Licensed User

Longtime User

• Aug 23, 2023

• #9

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)

 

Last edited: Aug 24, 2023

Upvote 0

stevel05

Expert

Licensed User

Longtime User

• Aug 24, 2023

• #10

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.

 

Upvote 0

Solution

MarcRB

Active Member

Licensed User

Longtime User

• Aug 24, 2023

• #11

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;"

Extra CSS:

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

Result:


Thank you.

 

Upvote 0