Is there a way to remove the blue frame from input filed?
The blue border you are showing is the focus border.
To remove it entirely, use something like
textField.setStyle("-fx-focus-color: -fx-control-inner-background ; -fx-faint-focus-color: -fx-control-inner-background ;");
or in an external css file
.text-field {
-fx-focus-color: -fx-control-inner-background ;
-fx-faint-focus-color: -fx-control-inner-background ;
}
To make it the same as the unfocused text field, use
.text-field:focused {
-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);
}
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 am having scss below which generates UI as following image. However as you can see lot of code is magic number and repeated I was trying to use sass function to come up with function to get css rule value.
however I realized that only simple number calculations are done with SCSS function and returning complex rule value could be challenging. I would like to know if there is any way possible to get desired result
// Current Code
$light: white;
$dark: gray;
div {
height: 400px;
width: 100px;
background: linear-gradient(to bottom,
$light, $light 90px,
$dark 90px, $dark 102px,
$light 102px, $light 105px,
$dark 105px, $dark 117px,
$light 117px, $light 120px,
$dark 120px, $dark 132px,
$light 132px, $light 135px,
$light 100%
)
}
// What I am trying to achieve
#function get-line-skeleton($height-of-bar, $verticle-spacing, $start-at)
{
// code to return value of rule with series of auto generated gradient
}
$light: white;
$dark: gray;
div {
height: 400px;
width: 100px;
background: #get-line-skeleton(12, 3, 90)
}
Yes, you can create a mixin to generate stripes. Sassmeister demo.
#mixin linear-gradient($stripe-size, $stripe-color, $gutter-size, $gutter-color, $count) {
$stripes: null; // it's like array
#for $i from 1 through $count {
$start-position: ($stripe-size + $gutter-size) * ($i - 1);
$end-posotion: $start-position + $stripe-size;
$stripe: $stripe-color $start-position, $stripe-color $end-posotion;
$stripes: append($stripes, $stripe, comma); // `push` gradient step to `array`
#if ($i != $count) {
// don't apply gutter after last stripe
$gutter: $gutter-color $end-posotion, $gutter-color $end-posotion + $gutter-size;
$stripes: append($stripes, $gutter, comma);
}
}
background: linear-gradient(to bottom, $stripes);
}
div {
#include linear-gradient(10px, red, 5px, green, 3);
}
What's interesting: #mixins, sass lists, #for loops, #if rules.
This mixin generates this code:
div {
height: 40px; /* not from mixin */
background: linear-gradient(to bottom, red 0px, red 10px, green 10px, green 15px, red 15px, red 25px, green 25px, green 30px, red 30px, red 40px);
}
<div></div>
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;
}
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: