0

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)
}
jpell
  • 198
  • 2
  • 10

1 Answers1

2

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);
    }
}
Przemek Krysztofiak
  • 906
  • 5
  • 15
  • Ideally the solution would be fx-css only therefore I could apply it globally. – jpell Jan 26 '21 at 13:40
  • 1
    @jeppla Use `-fx-view-order: -1;` for "hovered cells". Assuming you're using JavaFX 9+. It sets [this property](https://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/Node.html#viewOrderProperty()). And here's the [CSS documentation](https://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/doc-files/cssref.html#node). – Slaw Jan 26 '21 at 20:00
  • If i wanted to apply the default setting for -fx-view-order what would it be? For example if i dont want this to be applied in a combo-box's listview. Because when applied to a listview it increases the area of the node delaying the hovering or accepting of events to below cell. Essentially i have to click outside of the dropshadow even though I am clicking on a dfferent cell for it to handle events. This does not happen with tableview...might be a bug. – jpell Jan 27 '21 at 01:03
  • @jeppla The default value of the `viewOrder` property is `0`. Regarding "increases the area", I'm not sure how to help. Perhaps if you ask a new question with a [mre] demonstrating the problem. – Slaw Jan 27 '21 at 04:11