JavaFX TableView rectangle between row and scrollbar - javafx

Question

I have an issue with styling my TableView, because when I open new window with TableView it has something like on the picture below:
I don't know what causes it. When I click on another row in the table it's gone:
I also attach my CSS for table-view below:
.table-view{
-fx-background-color: -fx-color-navyBlue;
}
.table-view .filler{
-fx-background-color: -fx-color-navyBlue;
}
.table-view:focused{
-fx-background-color: -fx-color-navyBlue;
}
.table-view .column-header-background{
-fx-background-color: -fx-color-navyBlue;
-fx-border-color: -fx-color-navyBlue;
}
.table-view .column-header-background .label{
-fx-background-color: -fx-color-darkGray;
-fx-text-fill: -fx-color-orange;
}
.table-view .column-header {
-fx-background-color: -fx-color-darkGray;
-fx-border-width: 2;
-fx-border-color: -fx-color-navyBlue;
}
.table-view .table-cell{
-fx-text-fill: -fx-color-lightGray;
-fx-alignment: center;
-fx-border-width: 2;
-fx-border-color: -fx-color-navyBlue;
}
.table-view .table-row-cell{
-fx-background-color: -fx-color-navyBlue, -fx-color-darkGray;
-fx-table-cell-border-color: -fx-color-navyBlue;
}
.table-view .table-row-cell:selected * {
-fx-background-color: -fx-color-orange;
-fx-text-fill: -fx-color-navyBlue;
}
Also my TableView Column Resize Policy is constrained-resize and maybe it causes it? But when it's unconstrained-resize it looks worse because of additional "empty" column like below:
Any tip how to get rid of it on window load?

Answer 1

I did what I could to get make this runnable so css doesnt look good because I was using the one from the question but had to make some edits to get it to work. If you uncomment the one line it gets rid of the third column I know you said you set it to resize I cannot replicate the issue your having if you take this modify it so you get the issue and post it I may be able to help otherwise probably not I would check where you set the table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY); and make sure its executing correctly if you do it in fxml try setting it on initialization as well and see if that fixes the problem
public class Main extends Application {
public static void main(String[] args) { launch(args); }
#Override
public void start(Stage stage) {
ObservableList<Person> data = FXCollections.observableArrayList(new Person("First", "Last"));
TableColumn firstNameCol = new TableColumn("First Name");
firstNameCol.setMinWidth(100);
firstNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));
TableColumn lastNameCol = new TableColumn("Last Name");
lastNameCol.setMinWidth(100);
lastNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));
TableView<Person> table = new TableView<>();
table.setItems(data);
table.getColumns().addAll(firstNameCol, lastNameCol);
//table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
Button addButton = new Button("Add");
addButton.setOnAction(event -> data.add(new Person("First","Last")));
VBox vbox = new VBox();
vbox.getChildren().addAll(table, addButton);
Scene scene = new Scene(new Group(vbox));
scene.getStylesheets().add(String.valueOf(getClass().getClassLoader().getResource("tableview.css")));
stage.setScene(scene);
stage.show();
}
public static class Person {
private final SimpleStringProperty firstName;
private final SimpleStringProperty lastName;
private Person(String fName, String lName) {
this.firstName = new SimpleStringProperty(fName);
this.lastName = new SimpleStringProperty(lName);
}
public String getFirstName() { return firstName.get(); }
public void setFirstName(String fName) { firstName.set(fName); }
public String getLastName() { return lastName.get(); }
public void setLastName(String fName) { lastName.set(fName); }
}
}
tableview.css
.table-view{
-fx-background-color: navy;
}
.table-view .filler{
-fx-background-color: navy;
}
.table-view:focused{
-fx-background-color: navy;
}
.table-view .column-header-background{
-fx-background-color: navy;
-fx-border-color: navy;
}
.table-view .column-header-background .label{
-fx-background-color: darkGray;
-fx-text-fill: orange;
}
.table-view .column-header {
-fx-background-color: darkGray;
-fx-border-width: 2;
-fx-border-color: navy;
}
.table-view .table-cell {
-fx-text-fill: lightGray;
-fx-alignment: center;
-fx-border-width: 2;
-fx-border-color: navy;
}
.table-view .table-row-cell{
-fx-background-color: navy, darkGray;
-fx-table-cell-border-color: navy;
}
.table-view .table-row-cell:selected * {
-fx-background-color: orange;
-fx-text-fill: navy;
}