Justplayit94 Justplayit94 - 2 months ago 33
CSS Question

JavaFX Root border same as menu border

Continuing the development of my GUI, I've come across another problem. I've set a linear gradient as border for my

.root
in the CSS file, but it seems that the elements of
Menu
class somehow share the same attributes because the same linear effect has been applied to these also.

enter image description here

As you can see, on the bottom of the window is the effect that I told you about. Looking at the menu on the left, the effect has been applied to it also, and it's something that I do not want to happen.
This is my css file. The root is labeled as
.root
, and that menu is labeled as
.context-menu


.root{//here
-fx-background-color: #2D2E32;
-fx-font-size: 12px;
-fx-background-insets: 0 0 0 0, 0, 4, 4;
-fx-border-color: linear-gradient(transparent, #32739B);
}

#file{
-fx-background-color: linear-gradient(#494C58, #3E3F43);


}

#file .label{
-fx-text-fill: #EAEAEA;

}

.context-menu{//and here
-fx-background-color: #3E3F43;
}

#closeButton, #minimizeButton, #maximizeButton{
-fx-background-radius: 0;
-fx-background-color: linear-gradient(#494C58, #3E3F43);
-fx-text-fill: #ffffff;
-fx-font-weight: bold;
-fx-background-insets: 0 0 0 0, 0, 1, 2;
}

#closeButton:hover{
-fx-background-color: #E46458;
}

#minimizeButton:hover{
-fx-background-color: #80B1E0;
}

#maximizeButton:hover{
-fx-background-color: #80E089;
}

.menu-item:hover, menu-item:focus{
-fx-background-color: #69757A;
}

.menu{

}

.menu:hover{
-fx-background-color: #69757A;
}

.label{
-fx-text-fill: #ffffff;
}

.button{
-fx-background-radius: 0;
}

#submit{
-fx-background-color: #3F494D;
-fx-background-insets: 0 0 0 0, 0, 4, 4;
-fx-text-fill: #fff;
-fx-font-weight: bold;
-fx-border-color: #32739B;
}

#submit:hover{
-fx-background-color: #32739B;

}

.text-field{
-fx-background-radius: 0;
}

#forgot{
-fx-background-color: transparent;
-fx-text-fill: #818181;
}

.separator{
-fx-background-color: #363636;
-fx-background-insets: 0,1,2,0;
}

Answer

The problem is coming from the style class root:

The .root style class is applied to the root node of the Scene instance. Because all nodes in the scene graph are a descendant of the root node, styles in the .root style class can be applied to any node.

Therefore if you define the border color in this class, it will be inherited by any Node.

You could create a new CSS class with different name

.rootelement {
    -fx-border-color: linear-gradient(transparent, #32739B);
    -fx-border-width: 2;
}

and set the root element of your layout to have this style-class

BorderPane layout = new BorderPane();
layout.setTop(hBox);
layout.getStyleClass().add("rootelement");

Then you can remove the -fx-border-color attribute from the root class.

This way you can prevent any other control to inherit the border.