JavaFX ListView and TableView CSS for non focused selection - java

I literally have nothing in my Stylesheet but
.root {
-fx-accent: #a9d5f9;
}
I want to change this color. Is the color for selected row when table is no longer focused.
Been looking for a while and i found pretty much everything but this.

These two selectors should do it for ListViews:
.list-cell:filled:selected {
-fx-background: orange;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background: -fx-selection-bar;
}
To have the same coloring in TableViews (both cell and row selection), you can add more selectors:
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected,
.list-cell:filled:selected {
-fx-background: orange;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected ,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background: -fx-selection-bar;
}
Note: these selectors targeting even TreeTableViews.
The result:

Related

How do I remove scroll buttons from scroll bar in a scrollPane Javafx

Here`s code from css file:
.scroll-bar .button
{
visibility: hidden;
-fx-background-color: black;
}
But it has no effect on the scroll bar buttons:
please give me a hint how to solve this
I came up with something which seems to do what you want. I make absolutely no guarantees that it will continue to work for later JavaFX versions.
What I did was look at the default modena style sheet. Then try to remove all padding and insets related to the scroll bar buttons, effectively making them invisible, and apply a preferred size to the scroll bars (because they were basing the preferred size off of the buttons).
There are probably more effective ways of handling this and hiding things. And perhaps it could be done with fewer rules, but anyway, this is what I came up with and it appeared to work.
Also, if you make the scroll pane really small, the default functionality is to hide the thumb and allow movement around the scroll pane by only the buttons. In your case the buttons aren't there, so don't let the scroll pane become too small or you lose panning capabilities for the scroll pane.
Anyway, here is some example code:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import java.util.stream.Collectors;
import java.util.stream.IntStream;
public class NoButtonScroll extends Application {
private static final Lorem lorem = new Lorem();
private static final String NO_BUTTON_SCROLL_BARS = """
data:text/css,
.scroll-bar:vertical {
-fx-pref-width: 1.12em;
}
.scroll-bar:horizontal {
-fx-pref-height: 1.12em;
}
.scroll-pane > .scroll-bar:horizontal > .increment-button,
.scroll-pane > .scroll-bar:horizontal > .decrement-button {
-fx-padding: 0 0 0 0;
}
.scroll-pane > .scroll-bar:vertical > .increment-button,
.scroll-pane > .scroll-bar:vertical > .decrement-button {
-fx-padding: 0 0 0 0;
}
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
-fx-padding: 0 0 0 0;
}
.scroll-bar:horizontal > .increment-button,
.scroll-bar:horizontal > .decrement-button {
-fx-background-insets: 0 0 0 0 , 0 0 0 0, 0 0 0 0, 0 0 0 0 0;
}
.scroll-bar:vertical > .increment-button,
.scroll-bar:vertical > .decrement-button {
-fx-background-insets: 0 0 0 0, 0 0 0 0, 0 0 0 0;
}
.scroll-bar:horizontal > .decrement-button > .decrement-arrow {
-fx-padding: 0 0 0 0;
}
.scroll-bar:horizontal > .increment-button > .increment-arrow {
-fx-padding: 0 0 0 0;
}
.scroll-bar:vertical > .decrement-button > .decrement-arrow {
-fx-padding: 0 0 0 0;
}
.scroll-bar:vertical > .increment-button > .increment-arrow {
-fx-padding: 0 0 0 0;
}
""";
#Override public void start(Stage stage) {
ScrollPane standardScrollPane = new ScrollPane(generateText());
ScrollPane noButtonScrollPane = new ScrollPane(generateText());
noButtonScrollPane.getStylesheets().add(NO_BUTTON_SCROLL_BARS);
final VBox layout = new VBox(10, standardScrollPane, noButtonScrollPane);
layout.setPadding(new Insets(10));
layout.setPrefSize(600, 400);
stage.setScene(new Scene(layout));
stage.show();
}
private Text generateText() {
Text sampleText = new Text(lorem.nextText(500));
sampleText.setWrappingWidth(800);
return sampleText;
}
// class for generating example text for test data, not integral to the solution.
private static final class Lorem {
private static final String[] lorem = "lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".split(" ");
private int idx = 0;
public String nextWord() {
return lorem[getAndIncrementIdx()];
}
public String nextText(int nWords) {
return IntStream.range(0, nWords)
.mapToObj(i -> nextWord())
.collect(Collectors.joining(" "));
}
private int getAndIncrementIdx() {
int retVal = idx;
idx = (idx + 1) % lorem.length;
return retVal;
}
}
public static void main(String[] args) { launch(args); }
}
I saw a solution for removing scroll arrows on JavaFX context menu, maybe this could help:
.context-menu .scroll-arrow {
-fx-padding: 0 0 0 0;
}
.context-menu .menu-item {
-fx-border-style: solid;
-fx-border-color: transparent;
}
Source: https://gist.github.com/oowekyala/ccc67aa8663e788c072d3824b1c3d22a

How to flip axis of javafx slider

I'm creating rulers using javafx by modifying css of javafx slider and I created something like this:
And I was trying to make this:
So I tried to rotate sliders by calling setRotate() method but it becomes like this:
Here is my code for sliders:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.setRotate(180);
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.setRotate(180);
And here is my css code for sliders:
.slider > .thumb,
.slider > .thumb:hover,
.slider:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 2 0 -23 0;
-fx-padding: 1 1 0 1;
-fx-background-radius: 0;
}
.slider:vertical > .thumb,
.slider:vertical > .thumb:hover,
.slider:vertical:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 0 -23 0 2;
-fx-padding: 1 0 1 1;
-fx-background-radius: 0;
}
.slider > .track,
.slider:vertical > .track {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0;
}
.slider > .axis {
-fx-tick-mark-stroke: transparent;
-fx-tick-label-font-size: 0.833333em;
-fx-tick-label-fill: #9a9a9a;
-fx-background-color: #333;
}
Please suggest me how can I flip axis or rotate labels of these slider so that I can achieve expected results.
Basically, you have to set the side property of the axis (for left and top). The steps that are involved:
let the slider have a custom style, f.i. axis-top/axis-left
in css, define a rule for the axis contained in such a slider to set its side to top/left
The code:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.getStyleClass().add("axis-top");
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.getStyleClass().add("axis-left");
In css:
.slider.axis-top > .axis {
-fx-side: TOP;
}
.slider.axis-left > .axis {
-fx-side: LEFT;
}
This can certainly be optimized, but should get you started.

JavaFX Pagination button sizes and style

I'm trying to make the JavaFX pagination control look like this:
This is my styling:
.pagination .pagination-control .button, .pagination .toggle-button {
-fx-background-color: -fx-paginator-button;
-fx-border-color: -fx-colour-dark-grey;
}
.pagination .pagination-control .toggle-button:selected {
-fx-background-color: -fx-colour-purple;
}
.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover {
-fx-background-color: -fx-bg-colour-grey;
}
.pagination .pagination-control .left-arrow, .right-arrow{
-fx-background-color: -fx-font-colour-black;
}
.pagination .label {
-fx-text-fill: -fx-font-colour-black;
}
This is the result:
There seems to be an issue with the background colour. when the button is selected its overflowing a little at the bottom and for the arrow buttons the background is not applied to the entire button (If you look very closely at the rightmost arrow button the background colour ends leaving a little white strip). Also how do I increase the size of the buttons(they are mush smaller than the image in reality)? I've tried setting the prefWidth and prefHeight like so with no results
.pagination .pagination-control .button, .pagination .toggle-button {
-fx-background-color: -fx-paginator-button;
-fx-border-color: -fx-colour-grey;
-fx-pref-width: 15;
-fx-pref-height: 15;
}
These selectors should do the basic job:
/* Remove spacing */
.pagination > .pagination-control > .control-box {
-fx-spacing: 0;
}
/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-background-insets: 0, 1;
-fx-background-color: lightgray, #FAFAFA;
-fx-min-width: 30;
-fx-min-height: 30;
}
/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
-fx-background-insets: 0;
-fx-background-color: lightgray;
}
/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
-fx-background-insets: 0;
-fx-background-color: #58379A;
-fx-text-fill: white;
}
to have a result like:
All the buttons have a fixed size, the spacing is removed and the selected/hovered toggle button has the borderless color.
Additionally, if you want to control also the text size inside the buttons, you can update the following selector as:
/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
-fx-spacing: 0;
-fx-font-size: 12;
}
Furthermore you can control also the text size of the page information like:
.pagination > .pagination-control {
-fx-font-size: 8;
}
Or you can even hide it:
.pagination {
-fx-page-information-visible: false;
}
to have a result of:
The problem is that the -fx-pref-width or height are not been applied cause they are handled by their parent layout ( at least I think so ) in order to force the changes you need to set the min width and height instead of preferred.
Here is my css :
.pagination > .pagination-control > .control-box > .number-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination > .pagination-control > .control-box > .left-arrow-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination .pagination-control .toggle-button:selected {
-fx-background-color: purple;
}
.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover {
-fx-background-color: grey;
}
Consider have a look at modena.css for more information.

JavaFx - increase space between text and tab header area edge

I can't understand what element I should work to do this task. I tried
.tab-header-area .tab{
-fx-background-color:red;
-fx-padding:30px;
}
EDIT 1
This is what I get
But I have the same tab header inside big red rectangle. How can I increase distance between text and edge of the tab header area? By other words - how can I make tab header bigger with the same font size?
EDIT 2
When I do
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
I get:
But I need (sorry, it's gimp,not photoshop)
If you want a border around the tab (not the label), you have to use this:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-background-color: red;
-fx-padding: 20px;
-fx-border-color: black;
-fx-border-width: 1px;
}
If you want to manipulate the tab-container (where the label is in) itself you need this:
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container{
-fx-border-color: black;
-fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
UPDATE
Default for a selected tab is that:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 1, 1;
-fx-border-color: -fx-focus-color, -fx-faint-focus-color;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
And this it how it goes:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
-fx-padding: 20px;
-fx-background-color: red;
-fx-border-width: 1px;
-fx-border-color: black;
}
.tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{
-fx-border-width: 0px;
}
Look at the modena.css (default JavaFX stylesheet) file for info on things to change.
Font size will not change dynamic, you have to take care of font size with a listener on size/width/height property of the tab (in relation to font size).
And there are a lot of pseudo tags like .tab:selected .tab:top etc. So be aware of this kind of things if you want the default behavior only with new design.
And finally have a look at css selectors, you missed the descending selectors ('>'): http://www.w3schools.com/cssref/sel_element_gt.asp
It's not really clear what you are looking for... maybe
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
public class TabPaneStyleTest extends Application {
#Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab();
tab1.setGraphic(new Label("tab 1"));
Tab tab2 = new Tab();
tab2.setGraphic(new Label("tab 2"));
tabPane.getTabs().addAll(tab1, tab2);
Scene scene = new Scene(tabPane);
scene.getStylesheets().add("tab-pane-big-tabs.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with the css file
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}

Javafx - combo-box text-field bg color

I've googled and searched in SO but unfortunately, I didn't find the way how to make a Non-Editable combobox contain a textfield with white background via css.
In other words, how do I make a Non-Editable combobox appear like an Editable combobox (i.e. the same focus, arrow button, etc)?
The code:
.combo-box .text-field{
-fx-background-color: white;
}
doesn't work.
Can anyone help?
You can just add this css:
.combo-box > .list-cell{
-fx-background-color: -fx-outer-border, white;
-fx-background-insets: 1 -3 1 1, 1 -2 1 1 ;
}
But to get all the styles from edditable combobox you have to find .combo-box-base:editable from /jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.css and replace .text-field with .list-cell, because only editable combobox has .text-field
.combo-box > .arrow-button {
-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;
}
.combo-box > .arrow-button{
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 1 1 1 0, 1, 2;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.combo-box > .list-cell {
-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: 1 0 1 1;
-fx-background-radius: 2 0 0 2;
}
.combo-box:contains-focus {
-fx-background-color: -fx-focus-color;
-fx-background-insets: -0.2;
-fx-background-radius: 3;
}
.combo-box:focused > .list-cell{
-fx-background-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: 1 0 1 1, 1 0 1 1, 3 2 3 3;
-fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
}
.combo-box :contains-focus > .arrow-button{
-fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1, 2, 1, 2.6;
-fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
}
And here is the result:
1-st box styled with just 2 lines
2-nd has testComboBox2.setEditable(true);
3-d styled with big css from default styles.
I'm not sure if this is what you want because I can't imagine well "not editable combobox with a textfield" but maybe a comma between them?
.combo-box, .text-field{
-fx-background-color: white;
}
This is my output:
Is this what you are looking for?
I needed this for a project. I hope you haven't been smashing your head against it as long as I did...
.combo-box:disabled, .combo-box:disabled > .text-field {
-fx-opacity: 1.0;
}
Then, if your ComboBox is disabled, it will look normal, but you can not engage the drop down or type into the editable text field.

Categories

Resources