I'm using TableView in many places in my javaFX application. I'm working on a dark mode theme and want to style this table. Now i can't manage to remove the borders in the header row. Also, the text color in the table rows remains black although the rest of text appears white (because of a dark color for -fx-base in root css class) in my application. The table looks like this:
The css:
.root {
-fx-base:#292929;
}
.table-view {
-fx-background-color: transparent;
-fx-border-color: all-dialog-border-color;
-fx-border-width: 1;
-fx-table-header-border-color: transparent;
-fx-table-cell-border-color: transparent;
-fx-text-fill: white;
}
.table-view .column-header-background
{
-fx-background-color: -fx-base;
}
.table-row-cell
{
-fx-background-insets: 0, 0 0 1 0;
-fx-background-color: transparent;
-fx-text-fill: white;
}
.table-column {
-fx-alignment: CENTER;
}
.table-view:focused .table-row-cell:focused {
-fx-table-cell-border-color: transparent;
}
I want to remove the borders between the columns in the header and make the text in table rows appear white. How do i achieve this?
just play with this Css, it should give you all the customization you want
.table-view{
-fx-background-color: white;
-fx-font-size: 20px;
-fx-border-color: derive(black, -60%);
}
.table-view:focused{
-fx-background-color: derive(-fx-primary, 20%);
}
.table-row-cell {
-fx-cell-size: 40px;
-fx-border-style:solid inside;
-fx-border-width:2;
}
.table-view .column-header-background{
-fx-background-color: white;
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: black;
-fx-text-weight:strong;
-fx-border-style:solid inside;
-fx-border-width:2;
-fx-border-radius:20;
-fx-padding:7;
-fx-font-size:18;
}
.table-view .column-header {
-fx-background-color: transparent;
}
.table-view .table-cell{
-fx-text-fill: black;
-fx-font-size:15;
-fx-alignment:center;
-fx-border-style:solid inside;
-fx-border-width:1;
}
.table-row-cell:focused, .table-cell:focused{
-fx-text-fill: red;
}
.table-row-cell{
-fx-background-color: -fx-primary;
-fx-border-color: black;
-fx-table-cell-border-color: transparent;
}
.table-row-cell:empty{
-fx-background-color:white;
-fx-border-color: transparent;
-fx-table-cell-border-color: transparent;
}
.table-column{
-fx-alignment: CENTER;
}
.table-row-cell:even{
-fx-background-color: derive(white, -10%);
}
.table-row-cell:odd{
-fx-background-color: white;
}
.table-row-cell:even:hover{
-fx-background-color:pink;
}
.table-row-cell:odd:hover{
-fx-background-color: skyblue;
}
.table-row-cell:even:empty{
-fx-background-color: white;
}
.table-row-cell:odd:empty{
-fx-background-color: white;
}
.table-row-cell:selected {
-fx-background-color: black;
-fx-text-fill: white;
-fx-background-insets: 0;
}
.table-row-cell:selected .table-cell{
-fx-text-fill: white;
}
After going through the TableView css suggested by Tule Simon, I realized some css classes were missing.
To remove the border from table header, use:
.table-view .column-header
{
-fx-border-style: none;
}
To make the text in the cells appear white:
.table-cell
{
-fx-text-fill: white;
}
Result:
I have a Javafx project developed in eclipse with some css-files for table and chart backgrounds. In eclipse everything works fine, but when I use j4launch to built a windows .exe the css- files is not applied to the tables and (what seems very strange to me) only one of two line charts shows the wanted background. Both line charts refer to the the same css-file bau are situated in different tabs. I am using jre1.8.0_211. Can someone help me? It would be great. Thank you Marcus
I checked in scenebuilder that the refered css-files are all in the project. I cleaned and rebuilt the project and tried j4launch again, but the results are the same.
This is the first line in the project controller.fxml (sa there seam to be issues with the UTF-8:
<?xml version="1.0" encoding="UTF-8"?>
This is the css code attached to the barchart:
.chart {
-fx-padding: 10px;
}
.chart-content {
-fx-padding: 30px;
}
.chart-title {
-fx-text-fill: #ffffff;
-fx-font-size: 1.6em;
}
.axis-label {
-fx-text-fill: white ;
}
.chart-legend {
-fx-background-color: #8c9cca;
-fx-padding: 20px;
}
.chart-legend-item-symbol{
-fx-background-radius: 0;
}
.chart-legend-item{
-fx-text-fill: #ffffff
}
.chart-plot-background {
-fx-background-color: transparent;
}
.chart-vertical-grid-lines {
-fx-stroke: #3278fa;
}
.chart-horizontal-grid-lines {
-fx-stroke: #8c9cca;
}
.chart-alternative-row-fill {
-fx-fill: transparent;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
and this is the css for the tables:
.table-view{
-fx-background-color: transparent;
}
.table-view{
-fx-border-color: red;
}
.table-view:focused{
-fx-background-color: transparent;
}
/* Spaltenköpfe
Struktur column-header-background -> column-header */
.table-view .column-header-background{
-fx-background-color: linear-gradient(#131313 0%, #424141 100%);
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: white;
}
.table-view .column-header {
-fx-text-fill: bisque ;
-fx-background-color: transparent;
}
.table-view .table-cell{
-fx-text-fill: White;
-fx-font-size: 14px;
}
.table-row-cell{
-fx-background-color: -fx-table-cell-border-color, #616161;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em; /* 0 */
}
.table-row-cell:odd{
-fx-background-color: -fx-table-cell-border-color, #424242;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em; /* 0 */
}
.table-row-cell:selected {
-fx-background-color: #CBDAFF;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-border-color: #b3c7dc;
}
.table-view:focused .table-row-cell:selected .table-cell {
-fx-text-fill: black;
}
.table-view > .virtual-flow > .scroll-bar:vertical,
.table-view > .virtual-flow > .scroll-bar:vertical > .track,
.table-view > .virtual-flow > .scroll-bar:vertical > .track-background,
.table-view > .virtual-flow > .scroll-bar:horizontal,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track-background
{
-fx-background-color: transparent;
}
.table-view > .virtual-flow > .scroll-bar > .increment-button,
.table-view > .virtual-flow > .scroll-bar > .decrement-button {
-fx-opacity: 0;
}
No error messages. The windows programm is running bit the the stylesheets ara just partly applied (see above).
Currently having a couple issues with JavaFX and CSS stylesheets. I would like to have the selected tab text to be black, and have the non selected tabs to be white. I was able to achieve the background color of the active tab being a darker blue than the rest, but still have an awkward area around the tabs.
Here is the app when it first opens:
First Open
Here is the app when I click on a tab:
First Click
On the second image the text gets completely lost in the background color. If you could help me get rid of the space around the tabs themselves as well that would be awesome too!
Here is my CSS file:
/*main.css*/
/*set individual tab properties*/
.tab {
-fx-background-color: #1c6fb8;
-fx-font: 16px "Helvetica Neue" ;
-fx-background-radius: 0;
}
.tab-label {
-fx-text-fill: #fff;
}
.tab:focused .tab-label {
-fx-text-fill: #000;
}
.tab-header-background {
-fx-background-color: #1c6fb8;
}
.tab-pane {
-fx-tab-min-width:120px;
-fx-tab-max-width:120px;
-fx-tab-min-height:50px;
-fx-tab-max-height:50px;
-fx-background-color: #15558c;
}
.tab:selected {
-fx-text-fill: #000;
-fx-background-color: #15558c;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-background-color: #15558c;
}
Thanks in advance!
Key code:
.tab-pane .tab:selected
{
-fx-background-color: #15558c;
}
.tab:selected .tab-label
{
-fx-text-fill: #000;
-fx-background-color: #15558c;
}
Full code:
.tab {
-fx-background-color: #1c6fb8;
-fx-font: 16px "Helvetica Neue" ;
-fx-background-radius: 0;
}
.tab-label {
-fx-text-fill: #fff;
}
.tab:focused .tab-label {
-fx-text-fill: #000;
}
.tab-header-background {
-fx-background-color: #1c6fb8;
}
.tab-pane {
-fx-tab-min-width:120px;
-fx-tab-max-width:120px;
-fx-tab-min-height:50px;
-fx-tab-max-height:50px;
-fx-background-color: #15558c;
}
/*.tab:selected {
-fx-text-fill: #000;
-fx-background-color: #15558c;
}*/
.tab-pane .tab:selected
{
-fx-background-color: #15558c;
}
.tab:selected .tab-label {
-fx-text-fill: #000;
-fx-background-color: #15558c;
}
First Open:
First Click:
I have .css when the row is selected which is fine.
However when I click off the row it changes the row color grey with a black font, is there any way to edit this css?
.table-view {
-fx-base: transparent;
-fx-control-inner-background: transparent;
-fx-background-color: #507CA6;
-fx-padding: 5;
}
.table-view .column-header-background {
-fx-background-color: transparent;
}
.table-view .column-header, .table-view .filler {
-fx-size: 35;
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
-fx-border-color: #B4D9FD;
-fx-border-insets: 0 10 1 0;
}
.table-view .column-header .label {
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-alignment: center-left;
-fx-opacity: 1;
}
.table-view:focused .table-row-cell:filled:focused:selected {
-fx-background-color: #273D51;
}
Any help would be appreciated.
Try this:
/* When control is selected but not focused */
.table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected {
-fx-background: red;
}
first make selected class than use this script, i always use this $("tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
So I've been working for a while on a JavaFx application (for internal use of my company), which works great, but whenever I'm showing it to my colleagues, i always get the response "the application is great, but why is it so ugly?" , so i wend to look for examples of styled Javafx charts, and except of the Oracle documentation, i really found nothing, for buttons Oracle published a very nice post- here, but nothing similar for JavaFx charts.
I already looked for examples on Google's image gallery, but except for Oracle documentation, there's almost nothing.
Could some one be kind and post a nice CSS code that would end this embarrassment?
I'm attaching my current CSS code, Unfortunately i don't have enough reputation for posting images (snap of the application).
Any suggested Modification of my current CSS will be great just as well.
#appContainer {
-fx-background-color: linear-gradient(to bottom, #464646, #5f5f5f);
-fx-spacing:30;
}
.button {
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-background-insets: 0,1,2,3;
-fx-background-radius: 6;
-fx-padding: 12 30 12 30;
-fx-text-fill: white;
-fx-font-size: 12px;
-fx-spacing:30;
}
.button:hover{
-fx-background-color: linear-gradient(black, white);
}
.combo-box {
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-background-insets: 0,1,2,3;
-fx-background-radius: 3,2,2,2;
-fx-padding: 12 30 12 30;
-fx-text-fill: -fx-text-base-color;
-fx-font-size: 12px;
}
.combo-box:hover{
-fx-background-color: white;
}
#buttonMenuContainer {
-fx-background-color: linear-gradient(to bottom, #737373, #595959);
-fx-padding: 10px;
-fx-spacing:30;
}
.chart-title {
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-text-fill: #F8F8F8 ;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
.chart-alternative-row-fill {
-fx-fill: transparent;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
.chart-vertical-grid-lines {
-fx-stroke: transparent;
}
.chart-horizontal-grid-lines {
-fx-stroke: transparent;
}
.axis {
-fx-text-fill: #4682b4;
}
.chart {
-fx-padding: 10px;
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-text-fill: white;
}
.chart-plot-background{
-fx-padding:0px;
-fx-font-family: Verdana;
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
}
.chart-content{
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-padding:30px;
-fx-border-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-border-width: 5;
-fx-border-insets: -5;
}
.CategoryAxis{
-fx-color:black;
}
.chart-legend{
-fx-background-color:white;
}
.axis {
-fx-font-size: 1.4em;
-fx-tick-label-fill: black;
-fx-font-family: Tahoma;
-fx-tick-length: 20;
-fx-minor-tick-length: 10;
}
.chart-series-line {
-fx-stroke-width: 2px;
}
.default-color0.chart-series-line { -fx-stroke: black; }
.default-color1.chart-series-line { -fx-stroke: white }
.default-color2.chart-series-line { -fx-stroke: blue }
default-color0.chart-line-symbol { -fx-background-color: black, white; }
.default-color1.chart-line-symbol { -fx-background-color: white, white; }
.default-color2.chart-line-symbol { -fx-background-color: blue, white; }
.chart-legend { -fx-background-color: linear-gradient(gray, white);
-fx-font: Arial;
-fx-font-size: 20px;
-fx-text-fill: #F8F8F8 ;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
.pane {
-fx-background-color: #8fbc8f;
}
You can lookup the default styling in caspian.css, if you want to know what's possible to style. As to how you should style it, it depends on what you find pretty, so I'd advise you to look up a chart on google that you like and reconstruct it.