I am building a small application with JavaFX + FXML and I'm trying to implement some simple CSS to have a specific style.
I have an issue with the Combobox element. Indeed by default its color is grey:
And I would like to have it white (or transparent), and keep the borders, to match the same style as the Text Field. So I tried to set the background color to transparent but there is a side effect: The borders become transparent too!
Here is the CSS i have added:
.root {
-fx-font-size: 11pt;
-fx-font-family: "Verdana";
-fx-background: #FFFFFF;
}
.normal-label {
-fx-text-fill: #005EB8;
}
.normal-text-field {
-fx-text-fill: #333333;
}
.combo-box {
-fx-background-color: transparent;
}
I am not at all used to CSS writing, so maybe I completely miss something out. Is it that the combobox does not define borders? So I have to override the borders and find out what are the borders of the Text Field?
ComboBox inherits its CSS style from ComboBoxBase.
The ComboBox control has all the properties and pseudo‑classes of
ComboBoxBase.
The default CSS style class of ComboBoxBase is defined as:
.combo-box-base {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-fx-text-fill: -fx-text-base-color;
-fx-alignment: CENTER;
-fx-content-display: LEFT;
}
You can overwrite this style class like:
.combo-box-base {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
}
This style-class just sets the inner part to white, the border is actually untouched (remove the last two properties and then you will get a plain white borderless ComboBox).
Note:
Overwriting .combo-box-base or .combo-box style-classes are equivalent if only ComboBoxes are used.
The reason in the answer to use .combo-box-base style-class rather than the other one is that there are other controls inheriting also the .combo-box-base style-class, such as ColorPicker and DatePicker. Overwriting .combo-box-base yields in having all these controls sharing the same style, resulting in a much unified design.
You can add the following properties to control the border:
-fx-border-color: #D3D3D3
-fx-border-width: 1 1 1 1
Related
I am currently working on a stock management system. I am receiving the following error when changing scenes on the application. Error is displayed only if that screen contains a combo box which are most of the screens as seen in the images below.
Everything runs and works fine but I get the error below. I believe it is to do with the CSS combobox styling in CSS.
Background of previous error in relation to CSS: Initially I was having trouble with the files locating the CSS and was getting the error null/styles.css. Which I manged resolve by changing the following stylesheets="#style.css" to stylesheets="/stock/style.css". Not sure if this affects anything I thought I would mention it in case it is something to do with this even though the error was still showing before the changes.
May 19, 2020 6:31:50 PM javafx.scene.control.Control loadSkinClass
SEVERE: No valid constructor defined in 'com.sun.javafx.scene.control.skin.ComboBoxBaseSkin' for control ComboBox[id=comboStatus, styleClass=combo-box-base combo-box].
You must provide a constructor that accepts a single Skinnable (e.g. Control or PopupControl) parameter in com.sun.javafx.scene.control.skin.ComboBoxBaseSkin.
The CSS is as per the following:
.combo-box .list-cell {
-fx-background: #2D75E8;
-fx-background-color: transparent;
-fx-text-fill: white;
-fx-padding: 3 0 2 7;
-fx-cell-size: 1.96667em;
-fx-font-weight: bold;
}
.combo-box .list-view .list-cell {
-fx-text-fill: white;
-fx-font-weight: bold;
}
.combo-box-popup .list-view {
-fx-background-color: #2D75E8, #2D75E8;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.6), 8, 0.0, 0, 0);
-fx-font-weight: bold;
}
.combo-box-popup .list-view .list-cell {
-fx-padding: 4 0 4 5;
-fx-font-weight: bold;
/* No alternate highlighting */
-fx-background-color: #2D75E8;
}
.combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-text-fill: white;
}
.combo-box-popup .list-view .list-cell:filled:hover {
-fx-background-color: #2D75E8;
-fx-text-fill: white;
-fx-font-weight: bold;
}
.combo-box-base {
-fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxBaseSkin";
-fx-background-color: #2D75E8, #2D75E8, #2D75E8, #2D75E8;
-fx-background-radius: 5, 5, 4, 3;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-padding: 0;
-fx-font-weight: bold;
}
.combo-box-base:hover {
-fx-color: -fx-hover-base;
}
.combo-box-base:showing {
-fx-color: -fx-pressed-base;
}
I am also getting a CSS parsing error on some of the screens as seen below:
May 19, 2020 7:08:55 PM com.sun.javafx.css.parser.CSSParser declaration
WARNING: CSS Error parsing '*{-fx-text-inner-color: #3f5cc3; -fx-font-weight: 15px;}: Expected '<font-weight>' while parsing '-fx-font-weight' at [1,50]
I don't quite understand how it wants me to format it even though the error is showing the expected. Why does it need to be '<font-weight>'?
Here is are some screenshots of the application itself:
You have:
.combo-box-base {
-fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxBaseSkin";
-fx-background-color: #2D75E8, #2D75E8, #2D75E8, #2D75E8;
-fx-background-radius: 5, 5, 4, 3;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-padding: 0;
-fx-font-weight: bold;
}
Which is the source of your error. Specifically:
-fx-skin: "com.sun.javafx.scene.control.skin.ComboBoxBaseSkin";
This is telling JavaFX to use the specified class as the Skin implementation used for all controls which have the .combo-box-base style class. The purpose of this property is to override the default skin of a Control with a custom-made one. Using custom skins is how one can change the look-and-feel of a JavaFX application. However, your CSS specifies ComboBoxBaseSkin which is strange for at least three reasons:
It's an abstract class and thus can't be used directly.
It's the direct superclass of ComboBox's default skin: ComboBoxPopupControl.
It's an internal class (i.e. private API). You should not depend on internal API directly as it can change without notice. Case in point, the default skins became public API in JavaFX 9 and moved to a different package; this would have broken your application if it worked in the first place.
And ultimately the error comes from the fact ComboBoxBaseSkin has a constructor with a ComboBoxBase parameter, not a ComboBox parameter (CSS appears to look for an exact match).
The solution, it would appear, is to simply remove the -fx-skin property from your CSS and just let ComboBox use its default skin. Or, if you're actually trying to use a custom skin, use the fully qualified name of your custom skin class as the value instead.
As for your parsing error, -fx-font-weight expects the value to be a weight, as already noted by #James_D in the question comments. If you want to change the size use -fx-font-size. You can check out the JavaFX CSS Reference Guide to learn more about JavaFX-CSS.
I'm working on a TextField and just get a strange "extra border" I can't identify where it is comming from.
My UI looks like this (the extra border is in grey, the ordinary border I painted red in my CSS for debug):
FXML excerpt:
<HBox fx:id="sliderControlPane" styleClass="parameterSliderControlPane"
alignment="CENTER" visible="false">
<Slider fx:id="parameterSliderControl" styleClass="parameterSliderControl"
prefWidth="195" />
<Pane prefWidth="14"/>
<TextField fx:id="parameterSliderControlValue" styleClass="parameterSliderControlValue"
prefWidth="70"/>
</HBox>
CSS excerpt:
.parameterSliderControlPane {
-fx-padding: 0.0 5.0 0.0 5.0;
}
.parameterSliderControlValue {
-fx-border-color: #f00;
-fx-border-radius: 8.0;
-fx-font-size: 20.0;
-fx-padding: 0.0 4.0 0.0 4.0;
-fx-alignment: center-right;
}
.parameterSliderControl .track {
-fx-padding: 4.0;
}
.parameterSliderControl .thumb {
-fx-border-color: #aaa;
-fx-border-radius: 12.0;
-fx-background-color: #fff;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-padding: 14.0;
}
I don't think it is related, but for information, I keep track of consistency between the slider and the text field adding a listener to the text field, to update slider value or rollback text field value according to the input in the text field:
#Override
public void initialize(URL location, ResourceBundle resources) {
(...)
this.parameterSliderControlValue.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
if (!isNowFocused) {
(...)
//check wether input is valid
//if yes, update slider value with text field value
//if no, update text field value with slider value
}
}
}
I can't understand why this extra border is popping out in the background of the text field border. Does it come from the text field and I am supposed to set some parameter to hide it? Or it does come from another UI element I can't figure out?
I couldn't find any suspected parameter at official JavaFX CSS reference page (https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html)
Thank you!
As of #fabian comments, it turned out to be due to default theme (modena.css), which I found in the following link:
gist.github.com/maxd/63691840fc372f22f470
Line 1266 defines .text-input entry, which was responsible for the duplicated border. It does not define border parameters directly, but indirectly generates the extra border by background related parameters:
.text-input {
-fx-text-fill: -fx-text-inner-color;
-fx-highlight-fill: derive(-fx-control-inner-background,-20%);
-fx-highlight-text-fill: -fx-text-inner-color;
-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
-fx-cursor: text;
-fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
Solution to my particular case was to override -fx-background-color in my CSS. The final CSS is, though:
.parameterSliderControlValue {
-fx-border-color: #f00;
-fx-border-radius: 8.0;
-fx-font-size: 20.0;
-fx-padding: 0.0 4.0 0.0 4.0;
-fx-alignment: center-right;
-fx-background-color: transparent; //this line has been added to solve the problem
}
I want my choicebox to look the same before and after a user selects something and not have any focus indicator. Web searches indicate that I should be adjusting -fx-focus-color: and -fx-faint-focus-color: but I cannot seem to get it to act consistent. I use transparent (below) because ANY color other than transparent makes a wide glow around the choicebox after a selection.
default look, no css settings
before select:
after select:
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
before select:
after select:
-fx-faint-focus-color: transparent;
before select:
after select:
-fx-focus-color: transparent;
before select:
after select:
Try this.
.choice-box:focused {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
}
You can see default css(= modena.css) at here: OpenJDK/openjfx/8/master.
The above code is only differences between .choice-box and .choice-box:focused.
I experienced a strange problem with TableView styling in JavaFX (caspian.css): I want my cells to have a 1px padding or 1px transparent border. However, if I apply either of them, the column sort indicator shifts to the right.
How can I visually separate the table cells while keeping the sort arrow in place?
Case 1: Arrow is in place, cells are not separated.
.table-row-cell {
-fx-background-color: #FBFBFB;
-fx-cell-size: 58px;
}
Case 2: Arrow shifts, cells are separated
.table-row-cell {
-fx-background-color: #FBFBFB;
-fx-cell-size: 58px;
-fx-border-style: solid;
-fx-border-color: transparent; /** This causes trouble */
-fx-border-width: 1px;
}
Case 3: Arrow shifts, cells are separated
.table-row-cell {
-fx-background-color: #FBFBFB;
-fx-cell-size: 58px;
-fx-padding: 1 1 1 1; /** This causes trouble, too */
}
Setting the following style sheet
.table-row-cell {
-fx-background-color: #FBFBFB;
-fx-cell-size: 58px;
/** Nothing else done here */
}
and removing the padding of the Delivery date cell in my Java code
this.setStyle("-fx-padding: 0 0 0 0;");
solved the problem for me.
Iam trying to change the TextColor of an ChoiceBox in JavaFX.
This is my css file:
.choice-box{
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-padding: 3 10 4 20;
-fx-text-fill: white;
-fx-font-size: 12px;
}
And this is a screenshot of my choice-box:
-fx-text-fill: white; works on buttons but not on choic boxes. Why?
How can i change the color of the text in the choicebox?
i think you can do:
.choice-box .label {
-fx-text-fill: white;
}
You should give these properties to the listcell and not the choice-box. Refer this : http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#labeled
Hope it helps