By setting setTableMenuButtonVisible(true) on my tableview, I am able to see a button with a "+" sign on the top right corner, where u can select to show/hide columns. I wish to use a stylesheet to change the background color as well as the label colours etc but nothing works. I've tried the following:
.button
.toggle-button,
.menu-button {
-fx-background-color: black;
}
As always when it is about JavaFX styling, I recommand to use the Oracle documentation in order to see what compose the control (in your case the TableView and to search the default styling for each element in Modena.css (the default styling sheet since JavaFx 8).
Knowing that it is easy to style the table menu button :
/**
* For styling only the "+" button on the right top corner
*/
.table-view > .column-header-background > .show-hide-columns-button {
-fx-background-color: black;
}
/**
* In order to style any other column header's background
*/
.table-view .column-header {
-fx-background-color : yellow;
}
/**
* For styling column header's labels
*/
.table-view .column-header .label {
-fx-text-fill : green;
}
Related
I would like to style radio button in a group but I don't know how to select the input or label part.
I use a "classic" RadioButtonGroup<String>() vaadin object. I just set a classname "myclassname" to it.
Now in my CSS stylesheet I have :
/* select the radiogroup */
.myclassname {
background-color: red;
}
/* select each button in the myclassname radiogroup */
.myclassname vaadin-radio-button {
background-color: blue;
}
/* select the label ???? */
.myclassname vaadin-radio-button [part='label'] {
background-color: pink;
}
The last part for selecting the label in the radio button doesn't work. It doesn't work for the input part as well.
How to do for selecting input or label to customize them ?
Thank you
The circle part is inside the shadow DOM of the component, so you need to use the ::part() selector. The label is in the light DOM, so you can use a regular descendant selector for that.
.myclassname vaadin-radio-button::part(radio) {
background-color: blue;
}
.myclassname vaadin-radio-button label {
background-color: pink;
}
I want remove the arrows of a JavaFX Spinner.
I read how to remove the arrows of MenuButton in this link using CSS...but can't figure out how to do in my case .
remove arrows from menubutton
Any idea how ..thanks .
If you want to hide the array shapes you could do the same as the post you mentioned. The CSS properties you are looking for are :
.spinner .increment-arrow-button .increment-arrow {
-fx-padding: 0;
}
.spinner .decrement-arrow-button .decrement-arrow {
-fx-padding: 0;
}
If you don't want to alter their size by changing the padding you could set Shape to something non visible or just change it's background color to -fx-background-color: transparent;
I am trying to do some css styling in a stylesheet for a JavaFX scene.
It is going to be loaded upon opening the scene, and targets all the "basic" elements of a scene.
My problem is that i can't seem to find the right combination of code, to change the background color, of the button in a standard JavaFX checkbox.
This is where i am now:
.check-box:selected{
-fx-background-color: #00FF00;
}
I have tried some variants of the above, like
.check-box .button{
-fx-fill: #00FF00;
-fx-background-color: #00FF00;
}
and others, but without success.
So in general, how do i access a button in a checkbox?
Thank you in advance :-)
The parts of the CheckBox to apply the -fx-background-color to are .box and .box > .mark in case you want to change the mark color:
.check-box:selected > .box {
/* background color for selected checkbox */
-fx-background-color: lime;
}
.check-box > .box {
/* background color of unselected checkbox */
-fx-background-color: red;
}
.check-box:selected > .box > .mark,
.check-box:indeterminate > .box > .mark {
/* modify mark color */
-fx-background-color: blue;
}
a.css:
.dialog-pane .button {
-fx-background-color: -fx-base; -fx-text-fill: white;
}
Code:
Alert confirmationDialog = new Alert(AlertType.CONFIRMATION);
confirmationDialog.getDialogPane().getStylesheets().add("a.css");
When I open the confirmation dialog, the Cancel button is styled correctly, but the OK button is not. However, if I change -fx-background-color to an actual color, like:
.dialog-pane .button {
-fx-background-color: red; -fx-text-fill: white;
}
Both buttons will be styled correctly. I've been googling for a while and I'm stumped. Any ideas why this is happening?
The default stylesheet handles the default button by changing the definition of -fx-base:
.button:default {
-fx-base: -fx-default-button;
}
So setting the background to -fx-base won't remove the default blue color.
It's not clear quite what you want to achieve, but you are probably needing something like
.dialog-pane .button {
-fx-background-color: -fx-base;
-fx-text-fill: white;
}
.dialog-pane .button:default {
-fx-background-color: -fx-default-button;
}
and then wherever you are changing -fx-base you should also change -fx-default-button.
I see my confusion. I was working on an existing stylesheet that was trying to use -fx-base like a variable even though it's the name of an existing attribute.
I am attempting to override the default style of certain columns in a tableview in JavaFX. Basically I would like to have editable values present a lightyellow background so that people know that those columns are editable.
However when I set this CSS on the field:
.editableColumn.table-cell {
-fx-background-color:lightyellow;
-fx-alignment:CENTER-RIGHT;
-fx-border-width: .5px;
-fx-border-style: solid;
-fx-border-color:grey;
}
It removed the rest of the formatting, so highlight bars, etc are gone.
What CSS properties do I need to set so that the highlighting works, so that my values don't vanish (here it's white on yellow so you can't see the value).
Thanks!
If you just want to make sure the text color is appropriate for the background you set, try setting -fx-background to the same value as -fx-background-color:
.editableColumn.table-cell {
-fx-background-color:lightyellow;
-fx-background: lightyellow ;
-fx-alignment:CENTER-RIGHT;
-fx-border-width: .5px;
-fx-border-style: solid;
-fx-border-color:grey;
}
If you want the "selected style" to override the "editable style" for cells that are both in your column and are in a selected row, I think you will need to manually revert to the default styles for selected cells. Something like
.table-row-cell:filled:selected .editableColumn.table-cell {
-fx-background-color: null ;
-fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
/* -fx-border-width: null ; (not sure about this one...) */
}