B4J Question CSS File Not Working.

Similar threads

B4J Tutorial Working with JavaFX Scene Builder
B4J Library [class] CSS Utils
B4J Code Snippet Dark theme - base color
B4J Tutorial Styling buttons with CSS
B4J Tutorial CSS Example
B4J Code Snippet [JavaFX] - Metro Style CSS

XbNnX_507

Active Member
Licensed User
Hi All,

I have a little issue here.
In Extra CSS Property of TextField in the Designer this code works fine:
B4X:
-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
When i put the above code in a css file and add it to MainForm.StyleSheets.add("mycss.css")
it just don't work. Why?

mycss.css is file is like this:
B4X:
.text-field {
-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
-fx-text-fill: red;    '<- this is the only thing that takes effect
}
 

Erel

Administrator
Staff member
Licensed User
Check the output of Log(YourView.Style). If these attributes are set in that property then they will override the CSS file attributes.
 

XbNnX_507

Active Member
Licensed User
If these attributes are set in that property then they will override the CSS file attributes.
Yes, i did delete those Extra CSS properties in the designer when i use a css file.

Check the output of Log(YourView.Style)
With Extra CSS property i got this:
B4X:
-fx-font-size:15.00;-fx-border-color:#000000;
-fx-border-width:0.00;-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
-fx-text-fill: red;
With css file i got this:
'properties are not been read.
B4X:
-fx-font-size:15.00;-fx-border-color:#000000;
-fx-border-width:0.00;


Put all your CSS stuff in one file that makes it easier to maintain and even use custom ones.
yes that's what i did but i having problem with
B4X:
.text-field {
-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
-fx-text-fill: red;    '<- this is the only thing that takes effect
}
 

ThRuST

Well-Known Member
Licensed User
You can use my template. Style it as you wish

B4X:
/* ----------------------------- */
/* -         Text-Field        - */
/* ----------------------------- */
.text-field {

        -fx-background-color: #1a1a1a;
        -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
        -fx-background-radius: 10;

        -fx-font-family: Consolas;
        -fx-font-size: 7px;
        -fx-font-weight: Normal;
        -fx-text-fill: White;

}

/* ----------------------------- */
/* -     Text-Field Hover      - */
/* ----------------------------- */
.text-field: hover {

        -fx-background-color: #1e1e1e;

    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,1) , 10, 0.0 , 0 , 0.5 );

}

/* ----------------------------- */
/* -    Text-Field Focused     - */
/* ----------------------------- */
.text-field:focused {

        -fx-background-color: #1e1e1e;

}
 

XbNnX_507

Active Member
Licensed User
Actually, i was able to made it look like that with the Extra CSS property in the designer. But not with the css file. Seems like an internal problem with the css parser. in B4J.
i'll wait to Erel's answer.

Search Google it will solve your problem. "JavafX + CSS + Text-field" Good luck!
Thanks!.
 

stevel05

Expert
Licensed User
As Erel said, the style set in the textfields Style property will stop the css being applied. If you are setting all of the properties in the css file, you can just clear the Style property:

B4X:
TextField1.Style = ""
And the css will work.

Otherwise you can remove the specific items. It is probably simpler to remove them all and add the ones you want in the css file.
 

ThRuST

Well-Known Member
Licensed User
You can define your own CSS style in a file by doing this

In Code
B4X:
Button1.StyleClasses.Clear
Button1.Id = "MyStyle"
CSS
B4X:
/* ----------------------------- */
/* -     My Custom CSS class   - */
/* ----------------------------- */
#MyStyle {

    -fx-background-color:
        linear-gradient(#000000, #000000),
        linear-gradient(#aeaeae 0%, #ffffff 20%, #0a0a0a 100%),
        linear-gradient(#585858 0%, #585858 50%);

        -fx-background-radius: 7,6,5;
        -fx-background-insets: 0,1,2;
        -fx-padding: 10 21 10 21;

        -fx-text-fill: White;
        -fx-font-size: 13px;
        -fx-font-family: Consolas;
        -fx-font-weight: Bold;

        -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);

}
 
Top