CODEWITHSUNDEEP
cssjavafxtreetableview
Harshita Sethi
Harshita Sethi

Reputation: 2125

JavaFX: Align treetableview expand arrow to the row content

Below is my TreeTableView. As you can see, the arrows for expanding collapsing the level are not in line with the data.

enter image description here I want to make them in one line. But don't know how to do that. I tried the following ways in the css but none of it works.

.tree-table-row-cell .arrow {
    -fx-alignment: CENTER;
    -fx-mark-color:red;
}
.tree-table-row-cell .arrow-button {
    -fx-alignment: CENTER;
    -fx-mark-color:blue;
}

.tree-table-cell .arrow {
    -fx-alignment: CENTER;
    -fx-mark-color:yellow;
}
.tree-table-cell .arrow-button {
    -fx-alignment: CENTER;
    -fx-mark-color:green;
} 
.tree-table-cell > .arrow-button >.arrow{
   -fx-alignment: CENTER;
   -fx-mark-color:purple;
}
.tree-table-row-cell > .arrow-button >.arrow{
   -fx-alignment: CENTER;
   -fx-mark-color:grey;
}

Does anyone have any idea how can I achieve this?

Upvotes: 2

Views: 1560

Answers (1)

Brad
Brad

Reputation: 840

It's not perfect (and it's been a year and a half since this was asked) but I needed to do the same thing and this is the best I could come up with.

The problem is the arrow is already center-aligned and it won't realign after any styling is added so if you add any styling that makes any cell content larger it'll throw it off. (One of my cell values uses a larger font-size because the value in that cell is usually a minus sign which is hard for some of my users to see.)

Using Scenic View (a great tool for problems like this) I found there is a wrapper around the arrow node with class .tree-disclosure-node. (Scenic View is also how I know it's already centered.) So I just added some top padding to that wrapper.

Don't bother trying to pad the arrow itself as this will just make the arrow larger.

Hopefully this helps someone.

.tree-disclosure-node {
    -fx-padding: 15 5 0 5;
}

enter image description here

Upvotes: 2

Related Questions