CSS and JavaFX - CSS in a TableView - css
I want to apply css in all of my upper side of the tableview, the following photo show the part I want to apply the css (The part at the side of the column "Estado")
enter image description here
here's my css:
.table-view{
-fx-background-color: transparent;
}
.table-view:focused{
-fx-background-color: transparent;
}
.table-view .column-header-background{
-fx-background-color: linear-gradient(#101010 0%, #424141 100%);
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: white;
}
.table-view .column-header {
-fx-background-color: transparent;
}
.table-view .table-cell{
-fx-text-fill: white;
}
.table-row-cell{
-fx-background-color: -fx-table-cell-border-color, #616161;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em;
}
.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;
}
.table-row-cell:selected {
-fx-background-color: #005797;
-fx-background-insets: 0;
-fx-background-radius: 1;
}
The part is white because it isn't a column of my tableview, so I want to know how to apply CSS in empty parts (without columns) in the table.
FXML code:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<HBox prefHeight="300.0" prefWidth="773.0"
stylesheets="/iftorrent/gui/menuPrincipal/MenuPrincipalCSS.css"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="iftorrent.gui.menuPrincipal.MenuPrincipalControlador">
<children>
<TableView fx:id="tabela" prefWidth="773.0">
<columns>
<TableColumn fx:id="numero" prefWidth="35.0" text="NÂș " />
<TableColumn fx:id="nome" prefWidth="183.0" text="Nome" />
<TableColumn fx:id="tamanho" prefWidth="76.0" text="Tamanho" />
<TableColumn fx:id="velocidade" prefWidth="76.0" text="Velocidade" />
<TableColumn fx:id="tempo_estimado" prefWidth="120.0" text="Tempo Estimado" />
<TableColumn fx:id="estado" prefWidth="283.0" text="Estado" />
<TableColumn fx:id="progresso" prefWidth="283.0" text="Progresso" />
</columns>
</TableView>
</children>
</HBox>
You are looking for the .filler inside the .column-header-background. Add this rule:
.table-view .column-header-background .filler {
-fx-background-color: linear-gradient(#101010 0%, #424141 100%);
}
For reference, you can use the JavaFX CSS Reference, or use the CSS Analyzer tool built into SceneBuilder.
Related
In JavaFX how do i set label alignment inside a tab?
It is graphic+text inside tabs. The TabPane is made in the fxml : <TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" rotateGraphic="true" side="LEFT" stylesheets="#Scene1.css" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="vues.Scene1Controller"> <tabs> <Tab fx:id="tab111" text="Text1"> <graphic> <ImageView> <image> <Image url="#face.png" /> </image> </ImageView> </graphic> <content> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"> <children> <Button fx:id="but111" layoutX="91.0" layoutY="64.0" mnemonicParsing="false" onAction="#but111Action" text="Button" /> </children></AnchorPane> </content> </Tab> <Tab text="Text222222222222222222"> <graphic> <ImageView> <image> <Image url="#face.png" /> </image> </ImageView> </graphic> <content> <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" /> </content> </Tab> </tabs> </TabPane> and some css : .tab-pane { -fx-tab-min-width:300px; -fx-tab-max-width:300px; -fx-tab-min-height:300px; -fx-tab-max-height:300px; } .tab *.tab-label { -fx-rotate: 90; /* -fx-content-display: left; */ /* -fx-padding: 0 0 0 -60; */ /* -fx-translate-y: -100; */ /* -fx-graphic-text-gap: 30px; */ /* -fx-layout-y: 150; */ } .tab-pane > .tab-header-area > .headers-region > .tab:hover > .tab-container > .tab-label { -fx-text-fill: red; -fx-graphic: url("face33.png"); } And the result is this : Now my problem is that i want that aligned left, but the pick point of this, lets say, label, is center, so if i translate this to left with fixed value, they will not be aligned to left, but from center (using "-fx-translate-y: -150;" (height of 300 / 2)), and here is the result : I cant use a custom translate value for each, because the text will be variable.
Changing styles on JavaFX on the code and event handler
I have two questions that left me in doubt. 1Q: Suppose I have a button, and via SceneBuilder I set the Style of a button to "-fx-border-color: #FFFFFF" and it was in the fxml file. Suppose I also added other styles to it too. I created an event when the mouse enters the button. If I want to create an effect, for example the color of the border changes when the mouse enters and exits, I would have to do it by putting setStyle in the event and in the parameter I put all the styles that I already have and change only what I want? e.g: in the Button i have the styles a, b, c, -fx-border-color: #FFFFFF, d, e. For do that effect i would have to do: Button.setStyle("a,b,c,-fx-border-color: #AAAAAA, d, e") or there is a better way to do it? 2Q: In a similar case, if I want to make the button go up a little on the Y axis when hovering, would I have to create a different event for each button and associate them via SceneBuilder? e.g: #FXML void onMouseEnterEvent(MouseEvent event) { button_NewProject.setLayoutY(button_NewProject.getLayoutY()-8); } I created the code above an then realize that i can't actually handle this same event for all buttons, cause if i do it, all the buttons would go up when hovering a single button. I'm wrong? what do i need to do here?
Here is a demo that can hopefully help. If you have one button handler that handles more than one button, you need to make use of event.getSource. event.getSource will return the button that is receiving the action. handleBtnOnAction Demo's this. #FXML public void handleBtnOnAction(ActionEvent event) { Button tempButton = ((Button)event.getSource()); System.out.println("You pressed button " + tempButton.getText() + " - ID: " + tempButton.getId()); } Full Code Main import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; /** * * #author sedrick (sedj601) */ public class JavaFXApplication6 extends Application { #Override public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml")); Scene scene = new Scene(root); stage.setScene(scene); stage.show(); } /** * #param args the command line arguments */ public static void main(String[] args) { launch(args); } } Controller import java.net.URL; import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.ResourceBundle; import java.util.concurrent.atomic.AtomicInteger; import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.fxml.Initializable; import javafx.scene.control.Button; import javafx.scene.layout.GridPane; /** * * #author sedrick (sedj601) */ public class FXMLDocumentController implements Initializable { #FXML GridPane gpMain; int turn = 0; List<String> styles = new ArrayList(); #FXML public void handleBtnOnAction(ActionEvent event) { Button tempButton = ((Button)event.getSource()); System.out.println("You pressed button " + tempButton.getText() + " - ID: " + tempButton.getId()); } #FXML public void handleStartDemoBtnOnAction(ActionEvent event) { Button tempStartDemoButton = (Button)event.getSource(); tempStartDemoButton.setText("Change Buttons' ID"); Collections.shuffle(styles);//Changes the styles location in the list. AtomicInteger counter = new AtomicInteger(); gpMain.getChildren().forEach((node) -> {//get gridpane buttons System.out.println(((Button)node).getText() + ": " + styles.get(counter.get())); node.setId(styles.get(counter.getAndIncrement()));//Set the buttons CSS ID. }); } #Override public void initialize(URL url, ResourceBundle rb) { // TODO styles.add("green"); styles.add("round-red"); styles.add("bevel-grey"); styles.add("glass-grey"); styles.add("shiny-orange"); styles.add("dark-blue"); styles.add("record-sales"); styles.add("rich-blue"); styles.add("big-yellow"); styles.add("iphone"); styles.add("ipad-dark-grey"); styles.add("ipad-grey"); styles.add("lion-default"); styles.add("lion"); styles.add("windows7-default"); styles.add("windows7"); styles.add("green"); } } FXML <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.ColumnConstraints?> <?import javafx.scene.layout.GridPane?> <?import javafx.scene.layout.RowConstraints?> <?import javafx.scene.layout.VBox?> <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication6.FXMLDocumentController"> <children> <GridPane fx:id="gpMain" hgap="5.0" maxHeight="-Infinity" maxWidth="-Infinity" stylesheets="#main.css" vgap="5.0"> <columnConstraints> <ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" /> <ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" /> <ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" /> </columnConstraints> <rowConstraints> <RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" /> <RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" /> <RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" /> </rowConstraints> <children> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="1" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="2" GridPane.columnIndex="1" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="3" GridPane.columnIndex="2" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="4" GridPane.rowIndex="1" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="7" GridPane.rowIndex="2" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="8" GridPane.columnIndex="1" GridPane.rowIndex="2" /> <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleBtnOnAction" text="9" GridPane.columnIndex="2" GridPane.rowIndex="2" /> </children> </GridPane> <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleStartDemoBtnOnAction" prefHeight="100.0" text="Start Demo" /> </children> </VBox> CSS /* Code from http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ */ #green { -fx-background-color: linear-gradient(#f0ff35, #a9ff00), radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%); -fx-background-radius: 6, 5; -fx-background-insets: 0, 1; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 ); -fx-text-fill: #395306; } #round-red { -fx-background-color: linear-gradient(#ff5400, #be1d00); -fx-background-radius: 30; -fx-background-insets: 0; -fx-text-fill: white; } #bevel-grey { -fx-background-color: linear-gradient(#f2f2f2, #d6d6d6), linear-gradient(#fcfcfc 0%, #d9d9d9 20%, #d6d6d6 100%), linear-gradient(#dddddd 0%, #f6f6f6 50%); -fx-background-radius: 8,7,6; -fx-background-insets: 0,1,2; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); } #glass-grey { -fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%); -fx-background-radius: 30; -fx-background-insets: 0,1,1; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 ); } #shiny-orange { -fx-background-color: linear-gradient(#ffd65b, #e68400), linear-gradient(#ffef84, #f2ba44), linear-gradient(#ffea6a, #efaa22), linear-gradient(#ffe657 0%, #f8c202 50%, #eea10b 100%), linear-gradient(from 0% 0% to 15% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0)); -fx-background-radius: 30; -fx-background-insets: 0,1,2,3,0; -fx-text-fill: #654b00; -fx-font-weight: bold; -fx-font-size: 14px; -fx-padding: 10 20 10 20; } #dark-blue { -fx-background-color: #090a0c, linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%), linear-gradient(#20262b, #191d22), radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0)); -fx-background-radius: 5,4,3,5; -fx-background-insets: 0,1,2,0; -fx-text-fill: white; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); -fx-font-family: "Arial"; -fx-text-fill: linear-gradient(white, #d0d0d0); -fx-font-size: 12px; -fx-padding: 10 20 10 20; } #dark-blue Text { -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.9) , 1, 0.0 , 0 , 1 ); } #record-sales { -fx-padding: 8 15 15 15; -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0; -fx-background-radius: 8; -fx-background-color: linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%), #9d4024, #d86e3a, radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c); -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 ); -fx-font-weight: bold; -fx-font-size: 1.1em; } #record-sales:hover { -fx-background-color: linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%), #9d4024, #d86e3a, radial-gradient(center 50% 50%, radius 100%, #ea7f4b, #c54e2c); } #record-sales:pressed { -fx-padding: 10 15 13 15; -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0; } #record-sales Text { -fx-fill: white; -fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 ); } #rich-blue { -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: white; -fx-font-size: 12px; } #rich-blue Text { -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1); } #big-yellow { -fx-background-color: #ecebe9, rgba(0,0,0,0.05), linear-gradient(#dcca8a, #c7a740), linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%), linear-gradient(#f6ebbe, #e6c34d); -fx-background-insets: 0,9 9 8 9,9,10,11; -fx-background-radius: 50; -fx-padding: 15 30 15 30; -fx-font-family: "Helvetica"; -fx-font-size: 18px; -fx-text-fill: #311c09; -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1); } #big-yellow Text { -fx-effect: dropshadow( one-pass-box , rgba(255,255,255,0.5) , 0, 0.0 , 0 , 1); } #iphone-toolbar { -fx-background-color: linear-gradient(#98a8bd 0%, #8195af 25%, #6d86a4 100%); } #iphone { -fx-background-color: #a6b5c9, linear-gradient(#303842 0%, #3e5577 20%, #375074 100%), linear-gradient(#768aa5 0%, #849cbb 5%, #5877a2 50%, #486a9a 51%, #4a6c9b 100%); -fx-background-insets: 0 0 -1 0,0,1; -fx-background-radius: 5,5,4; -fx-padding: 7 30 7 30; -fx-text-fill: #242d35; -fx-font-family: "Helvetica"; -fx-font-size: 12px; -fx-text-fill: white; } #iphone Text { -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , -1 ); } #ipad-dark-grey { -fx-background-color: linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%), linear-gradient(#020b02, #3a3a3a), linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%), linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%), linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%); -fx-background-insets: 0,1,4,5,6; -fx-background-radius: 9,8,5,4,3; -fx-padding: 15 30 15 30; -fx-font-family: "Helvetica"; -fx-font-size: 18px; -fx-font-weight: bold; -fx-text-fill: white; -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1); } #ipad-dark-grey Text { -fx-effect: dropshadow( one-pass-box , black , 0, 0.0 , 0 , -1 ); } #ipad-grey { -fx-background-color: linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%), linear-gradient(#020b02, #3a3a3a), linear-gradient(#b9b9b9 0%, #c2c2c2 20%, #afafaf 80%, #c8c8c8 100%), linear-gradient(#f5f5f5 0%, #dbdbdb 50%, #cacaca 51%, #d7d7d7 100%); -fx-background-insets: 0,1,4,5; -fx-background-radius: 9,8,5,4; -fx-padding: 15 30 15 30; -fx-font-family: "Helvetica"; -fx-font-size: 18px; -fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1); } #ipad-grey Text { -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 ); } #lion-default { -fx-background-color: rgba(0,0,0,0.08), linear-gradient(#5a61af, #51536d), linear-gradient(#e4fbff 0%,#cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%); -fx-background-insets: 0 0 -1 0,0,1; -fx-background-radius: 5,5,4; -fx-padding: 3 30 3 30; -fx-text-fill: #242d35; -fx-font-size: 14px; } #lion { -fx-background-color: rgba(0,0,0,0.08), linear-gradient(#9a9a9a, #909090), linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%); -fx-background-insets: 0 0 -1 0,0,1; -fx-background-radius: 5,5,4; -fx-padding: 3 30 3 30; -fx-text-fill: #242d35; -fx-font-size: 14px; } #windows7-default { -fx-background-color: #3c7fb1, linear-gradient(#fafdfe, #e8f5fc), linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%); -fx-background-insets: 0,1,2; -fx-background-radius: 3,2,1; -fx-padding: 3 30 3 30; -fx-text-fill: black; -fx-font-size: 14px; } #windows7 { -fx-background-color: #707070, linear-gradient(#fcfcfc, #f3f3f3), linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%); -fx-background-insets: 0,1,2; -fx-background-radius: 3,2,1; -fx-padding: 3 30 3 30; -fx-text-fill: black; -fx-font-size: 14px; } CSS is from http://fxexperience.com/2011/12/styling-fx-buttons-with-css/!
Scrollbar doesn't appear when scrolling
I'm using HiddenSidesPane to show and hide scrollbar when needed. Scrollbar appears when I move mouse to the edge of the ScrollPane and hides when I move back. However, I have a problem to show scrollbar when the scrolling is detected. You can find my code below: FXML: <?import javafx.scene.control.ScrollPane?> <?import javafx.scene.layout.VBox?> <?import org.controlsfx.control.HiddenSidesPane?> <?import java.net.URL?> <ScrollPane xmlns:fx="http://javafx.com/fxml" fx:controller="hypermap.components.featurespanel.view.properties.PropertiesTab" fx:id="propertyTabRoot" fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="NEVER"> <stylesheets> <URL value="#Scrollbar.css"/> </stylesheets> <HiddenSidesPane fx:id="hiddenSidesPane" minWidth="280"> <content> <VBox fx:id="vboxInsideScroll"> <VBox fx:id="groupsContainer"/> <VBox fx:id="messageContainer"/> </VBox> </content> </HiddenSidesPane> </ScrollPane> CSS file: .scroll-pane{ -fx-focus-color: none; -fx-background-color: transparent; } .scroll-bar > .increment-button, .decrement-button, .increment-arrow, .decrement-arrow{ -fx-pref-height: 0; } .scroll-bar:vertical{ -fx-background-color: transparent; -fx-border-color: transparent; -fx-pref-width: 10; -fx-padding: 0; } .scroll-bar:vertical .thumb{ -fx-background-color: color-dark-slate; -fx-border-radius: 100; -fx-padding: 0 4 0 0; -fx-opacity: 0.2 } .scroll-bar:vertical .track{ -fx-background-color: transparent; } Controller file with method using HiddenSidesPane: #FXML private VBox groupsContainer; #FXML private VBox messageContainer; #FXML private ScrollPane propertyTabRoot; #FXML private HiddenSidesPane hiddenSidesPane; private void makeScrollable(ScrollPane scrollPane) { final Node scrollbar = scrollPane.lookup(".scroll-bar:vertical"); hiddenSidesPane.setRight(scrollbar); hiddenSidesPane.setTriggerDistance(40); hiddenSidesPane.setAnimationDuration(Duration.millis(500)); scrollPane.setOnScroll((event -> { hiddenSidesPane.setRight(scrollbar); event.consume(); })); I would be very grateful for any help. Also, I don't know why the scrollbar's thumb has the same hight all the time, even if the content is so huge that it should be smaller. Thank you!
how tp set the different font fill text color for selected label in a JFXListView?
I've create a JFXListView in th FXML file : <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"> <children> <JFXListView fx:id="listName" layoutX="-1.0" layoutY="-5.0" /> </children> </AnchorPane> and injected in controller #FXML private JFXListView<Label> listName; then I fill the JFXListView with labels public void loadListAdsTarget(){ listName.setVerticalGap(7.0); for (int i = 0; i < 4; i++) { listName.getItems().add(new Label("name " +i+ " desc : text text text")); } listName.getStyleClass().add("mylistview"); listName.depthProperty().set(1); listName.setExpanded(true); } I tried to change the color of the selected label by css, but I did not get a good result by changing the text to white. .mylistview .label { -fx-text-fill: #a0a2ab; } .mylistview:selected .label:selected { -fx-text-fill: red; } .mylistview:focused .label:selected { -fx-text-fill: while; } .mylistview .list-cell:selected { -fx-background-color: #2196f3; } .mylistview .list-cell { -fx-background-color: #282d40; }
Add this section of css to your file and it will change the selected text color .mylistview .list-cell:selected .label{ -fx-text-fill: rgb(20, 20, 20); } You can also remove this section .mylistview:focused .label:selected { -fx-text-fill: while; }
Using both CSS and setStyle
I have an object where I have css stylizing the object. In my program I would like to change specific elements in the styling such as background color. The problem that I have run into was that when I call setStyle(-fx-background-color:red) it will override all the styling elements. Even if I just change background color. #header { -fx-background-color: #4d4d4d; -fx-border-color: #545454; -fx-border-width: 1px; -fx-border-style: solid; } #header:hover { -fx-background-color: #9ACD32; }
You should define your colors in your CSS using "looked up colors". See the JavaFX CSS reference for details. Looked-up Colors With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node. In the following example, all background color of all buttons uses the looked up color "abc". .root { abc: #f00 } .button { -fx-background-color: abc } Sample Application In the sample application, the key code is the setting of the looked up color value dynamically in code: headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { #Override public void changed( ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle ) { RadioButton radio = (RadioButton) newToggle; header.setStyle("header-base-color: " + radio.getText()); } }); Together with the definition of the header-base-color lookup id for the color in the css below: header-color.css .root { header-base-color: #4d4d4d; } #header { -fx-background-color: header-base-color; -fx-border-color: #545454; -fx-border-width: 1px; -fx-border-style: solid; } #header:hover { -fx-background-color: #9ACD32; } header-color.fxml <?xml version="1.0" encoding="UTF-8"?> <?scenebuilder-stylesheet header-color.css?> <?import javafx.geometry.Insets?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.VBox?> <?import java.net.URL?> <BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="HeaderColorController"> <top> <HBox fx:id="header" prefHeight="-1.0" prefWidth="-1.0"> <children> <Label text="A really hard to read label" /> </children> </HBox> </top> <center> <VBox prefHeight="-1.0" prefWidth="-1.0" spacing="10.0" style="-fx-background-color: azure;"> <children> <RadioButton mnemonicParsing="false" style="-fx-text-fill: forestgreen;" text="forestgreen"> <toggleGroup> <ToggleGroup fx:id="headerColorToggleGroup" /> </toggleGroup> </RadioButton> <RadioButton mnemonicParsing="false" style="-fx-text-fill: firebrick;" text="firebrick" toggleGroup="$headerColorToggleGroup" /> <RadioButton mnemonicParsing="false" selected="true" style="-fx-text-fill: #4d4d4d;" text="#4d4d4d" toggleGroup="$headerColorToggleGroup" /> </children> <padding> <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> </padding> </VBox> </center> <stylesheets> <URL value="#header-color.css" /> </stylesheets> </BorderPane> HeaderColorApp.java import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class HeaderColorApp extends Application { #Override public void start(Stage primaryStage) throws Exception{ Parent root = FXMLLoader.load(getClass().getResource("header-color.fxml")); primaryStage.setScene(new Scene(root)); primaryStage.show(); } public static void main(String[] args) { launch(args); } } HeaderColorController.java import java.net.URL; import java.util.ResourceBundle; import javafx.beans.value.*; import javafx.fxml.FXML; import javafx.scene.control.*; import javafx.scene.layout.HBox; public class HeaderColorController { #FXML private ResourceBundle resources; #FXML private URL location; #FXML private HBox header; #FXML private ToggleGroup headerColorToggleGroup; #FXML void initialize() { assert header != null : "fx:id=\"header\" was not injected: check your FXML file 'header-color.fxml'."; assert headerColorToggleGroup != null : "fx:id=\"headerColorToggleGroup\" was not injected: check your FXML file 'header-color.fxml'."; headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { #Override public void changed(ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle) { RadioButton radio = (RadioButton) newToggle; header.setStyle("header-base-color: " + radio.getText()); } }); } }