I have a problem with the CSS properties of a ComboBox-Popup. In the picture you see a tiny white line between rounded border an the list cell element.
I think this line is a background color or a border from a other css property.
Have you any idea which css property I must change?
This picture show you on the right side my problem with the white line. On the left side you see a menubar without any line.
In this screenshot I have removed all combobox css properties and you can see a gap beetween the border an the selected cell.
Here is the css combobox property of my stylesheet.
-fx-base and fx-color = dark grey background color
-fx-accent = green hover and highlight color.
.combo-box-popup .list-view {
-fx-color: -fx-base;
-fx-background-color:
derive(-fx-color,-40%),
derive(-fx-color,100%),
linear-gradient(to bottom, derive(-fx-color, 15%) 0%, derive(-fx-color, 40%) 15%, derive(-fx-color,55%) 75%, derive(-fx-color,15%) 100%);
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
-fx-padding: 0.333333em 0.333333em 0.666667em 0.083333em;
}.combo-box-popup .list-view .list-cell:filled {
-fx-background-color: transparent;
-fx-text-fill: white;
}
.combo-box-popup .list-view .list-cell:filled:hover {
-fx-background-color: -fx-accent;
}
.combo-box-popup .list-view .list-cell:filled:selected {
-fx-background-color: -fx-accent;
}
I found the solution. The transparency for the list-view was not set.
.combo-box-popup .list-view .list-cell {
-fx-background-color: transparent;
}
Related
I have a problem with CSS on TreeTableView.
For TableView when I define CSS like this :
.table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-fill: white;
}
The selected rows have text in white even if I click out of the table
For TreeTableView I have defined CSS like this :
.tree-table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-fill: white;
}
The selected rows have text in white but when I click out of the table the text change to black
Does someone know how can I solve this ?
Thank you
Try setting the text fill on the cells themselves, instead of the row cells:
.tree-table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
}
.tree-table-row-cell:selected .tree-table-cell,
.tree-table-cell:selected {
-fx-text-fill: white;
}
You probably also want
.tree-table-row-cell:selected .tree-disclosure-node .arrow {
-fx-background-color: white ;
}
For a slightly different approach:
The default behavior of the modena stylesheet is to set the text fill to a "looked up color" called -fx-text-background-color. This is set to a "ladder", which is a function based on the value of another looked-up color called -fx-background. The background color of the rows and cells is defined in terms of -fx-background.
The way the "ladder" works is if the intensity of -fx-background is less than 45%, the ladder evaluates to -fx-light-text-color (white), between 46% and 59% it evaluates to -fx-dark-text-color (black) and above that to -fx-mid-text-color (grey).
So typically, you can simply change -fx-background (instead of -fx-background-color) and the text will change to something appropriate:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
}
In your case, this won't quite give you what you want. The color you chose as the background isn't dark enough to trigger the light text color; the intensity is about 58%, so it evaluates to black.
If you use a darker background, say #d1531f, then you see the white text with no additional changes.
You can fix this by adjusting the ladder itself so the intensity thresholds are different:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-background-color: ladder(
-fx-background,
-fx-light-text-color 60%,
-fx-dark-text-color 61%,
-fx-dark-text-color 69%,
-fx-mid-text-color 70%
);
}
or perhaps just by bypassing the ladder entirely and setting -fx-text-background-color directly to the light text color:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-background-color: -fx-light-text-color;
}
This is more complex (perhaps) but is more in the style of the default CSS. It works with the cells without explicitly having to change the CSS for those (basically, looked-up colors are inherited), and the disclosure arrow automatically has the same color as the text.
I want to create button in JavaFX having the following style:
I tried to use linear-gradient, but not able to add horizontal and vertical gradient at the same time.
Will you please help to create CSS for the above button style?
As per the comments I am including the css, that I have done so far :
.button-sales {
-fx-border-width: 4px;
-fx-border-color: white rgb(7,2,226) rgb(7,2,226) white;
-fx-background-radius: 0,0,0,0;
-fx-background-color: rgb(0,0,254);
-fx-font-weight: bold;
-fx-font-size: 1.1em;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, rgb(7,2,226) 0%, rgb(7,2,226) 100%),
white,
rgb(0,0,254);
}
but above css not exactly match with the button I required. Please help.
I am trying to change the style of the javafx spinner using a css stylesheet.
However, when changing the colour I can only change the colour of the text field and the arrow buttons to the side of spinner still look like the default.
How can I change the colour of these buttons too?
Set the -fx-body-color that is used as background for the buttons:
.spinner .increment-arrow-button,
.spinner .decrement-arrow-button {
-fx-body-color: yellow;
}
.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover {
/* interpolate color between yellow and red based on first color brightness */
-fx-body-color: ladder(#444, yellow 0%, red 100%);
}
.spinner .increment-arrow-button:hover:pressed,
.spinner .decrement-arrow-button:hover:pressed,
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed {
/* interpolate color between yellow and red based on first color brightness */
-fx-body-color: ladder(#AAA, yellow 0%, red 100%);
}
Those are used by the default stylesheet as the button's background color.
I know the OP figured it out but I'm putting this here in case someone else needs an answer.
You can edit spinner buttons with these selectors:
.spinner .increment-arrow-button {}
.spinner .decrement-arrow-button {}
.spinner .increment-arrow-button:hover {}
.spinner .decrement-arrow-button:hover {}
.spinner .increment-arrow-button:pressed {}
.spinner .decrement-arrow-button:pressed {}
If you'd like to edit the arrows inside the buttons themselves, use these selectors:
.spinner .increment-arrow-button .increment-arrow {
/* The default Modena styling */
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}
.spinner .decrement-arrow-button .decrement-arrow {
/* The default Modena styling */
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
Here is another helpful tip for something people may also run into: changing the color in the area behind the buttons.
Setting these selectors to have a transparent background will remove the highlighted areas behind the buttons within the spinner.
You can achieve that with something like this:
/* In general */
.spinner {
-fx-background-color: transparent;
}
/* On user interaction */
.spinner:focused,
.spinner:contains-focus {
-fx-background-color: transparent;
}
Just a few things I picked up while creating my own dark theme stylesheet that I use for school projects.
I want to change font color in TextField .I found -fx-background-color , -fx-border-color for changing the color of background and border but nothing for text.
Setting the -fx-text-fill works for me.
See below:
if (passed) {
resultInfo.setText("Passed!");
resultInfo.setStyle("-fx-text-fill: green; -fx-font-size: 16px;");
} else {
resultInfo.setText("Failed!");
resultInfo.setStyle("-fx-text-fill: red; -fx-font-size: 16px;");
}
The CSS styles for text input controls such as TextField for JavaFX 8 are defined in the modena.css stylesheet as below. Create a custom CSS stylesheet and modify the colors as you wish. Use the CSS reference guide if you need help understanding the syntax and available attributes and values.
.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 */
}
.text-input:focused {
-fx-highlight-fill: -fx-accent;
-fx-highlight-text-fill: white;
-fx-background-color:
-fx-focus-color,
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: -0.2, 1, -1.4, 3;
-fx-background-radius: 3, 2, 4, 0;
-fx-prompt-text-fill: transparent;
}
Although using an external stylesheet is a preferred way to do the styling, you can style inline, using something like below:
textField.setStyle("-fx-text-inner-color: red;");
If you are designing your Javafx application using SceneBuilder then use -fx-text-fill(if not available as option then write it in style input box) as style and give the color you want,it will change the text color of your Textfield.
I came here for the same problem and solved it in this way.
I have a ListView and want the following:
Odd rows with white background color;
ListView: when mouse over an item, highlight with a blue shade;
ListView: when an item is selected, paint it with a gradient;
ListView: when focus is lost from ListView, selected item should be painted with gradient;
ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
That's my code. It's working fine, except for the even rows: on mouse over, it highlight in white. So, the text's white and can't be showed. What's wrong with it?
.list-cell:filled:selected:focused, .list-cell:filled:selected {
-fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
-fx-text-fill: white;
}
.list-cell:odd {
-fx-cell-hover-color: #0093ff;
-fx-background-color: white;
}
.list-cell:filled:hover {
-fx-cell-hover-color: #0093ff;
-fx-text-fill: white;
}
Thanks in advance.
EDIT:
Slightly changing your css:
.list-cell:filled:selected:focused, .list-cell:filled:selected {
-fx-background-color: linear-gradient(#328BDB 0%, #207BCF 25%, #1973C9 75%, #0A65BF 100%);
-fx-text-fill: white;
}
.list-cell:even { /* <=== changed to even */
-fx-background-color: white;
}
.list-cell:filled:hover {
-fx-background-color: #0093ff;
-fx-text-fill: white;
}
This css produces the following presentation:
Does this give what you expect?
I changed odd to even. The first cell is even, because its index value is 0 (zero). Also -fx-cell-hover-color is not valid. I changed it to -fx-background-color where needed or removed it.
Original text: (note that this has different interpretation of odd/even)
My take would be this:
(I included your requirements in a numbered list for reference in the css. I also made the gradient more obvious and added a green background for even cells.)
/*
1. Odd rows with white background color;
2. ListView: when mouse over an item, highlight with a blue shade;
3. ListView: when an item is selected, paint it with a gradient;
4. ListView: when focus is lost from ListView, selected item should be painted with gradient;
5. ListView: all items will start with text-fill black. But on mouse over and/or selected it will change to white.
*/
.list-cell:filled:selected:focused, .list-cell:filled:selected {
/* 3:, 4: */
-fx-background-color: linear-gradient(#333 0%, #777 25%, #aaa 75%, #eee 100%);
-fx-text-fill: white; /* 5 */
}
.list-cell { -fx-text-fill: black; /* 5 */ }
.list-cell:odd { -fx-background-color: white; /* 1 */ }
.list-cell:even { -fx-background-color: #8f8; /* for information */ }
.list-cell:filled:hover {
-fx-background-color: #00f; /* 2 */
-fx-text-fill: white; /* 5 */
}
This leads to this rendering: