javafx - How can I apply a drop shadow to the bottom of a table row on hover

Question

This is giving me only a drop shadow on top.

Increasing the y-offset does nothing. It looks like it might be "behind something"

.table-row-cell:hover {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0)
}

//increased y axis offset
.table-row-cell:hover {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 5.0)
}

question from:https://stackoverflow.com/questions/65895445/how-can-i-apply-a-drop-shadow-to-the-bottom-of-a-table-row-on-hover

Answer 1

Subsequent rows are put on the stack in the order they were added. That is the reason of issue which you describe as "behind something". To get the desired effect bring the hovered row to front to put on the top of the stack.

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.stage.Stage;

public class TableRowDropShadowApp extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        TableView<Employee> tableView = new TableView<>(
                FXCollections.observableArrayList(new Employee("John", "Doe"), new Employee("Jane", "Smith")));

        TableColumn<Employee, String> nameColumn = new TableColumn<>("Name");
        nameColumn.setCellValueFactory(param -> param.getValue().nameProperty);

        TableColumn<Employee, String> surnameColumn = new TableColumn<>("Surname");
        surnameColumn.setCellValueFactory(param -> param.getValue().surnameProperty);

        tableView.getColumns().setAll(nameColumn, surnameColumn);

        tableView.setRowFactory(table -> {
            TableRow<Employee> tableRow = new TableRow<>();
            tableRow.hoverProperty().addListener((ChangeListener<Boolean>) (observable, oldValue, newValue) -> {
                if (newValue) {
                    tableRow.toFront();
                    tableRow.setStyle("-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0)");
                } else {
                    tableRow.setStyle("");
                }
            });
            return tableRow;
        });

        primaryStage.setScene(new Scene(tableView));
        primaryStage.show();
    }
}

class Employee {

    public final StringProperty nameProperty = new SimpleStringProperty();
    public final StringProperty surnameProperty = new SimpleStringProperty();

    public Employee(String name, String surname) {
        nameProperty.set(name);
        surnameProperty.set(surname);
    }
}