2

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?

Harshita Sethi
  • 2,035
  • 3
  • 24
  • 46
  • The default behaviour is, that the line is vertically aligned with the marker. But you changed the alignment of the marker or the font in any other css that is infecting this. If it is a fxml and you already have scenebuilder, try to analyse it with the "CSS Analyzer"-Feature in scenebuilder. You will see if any default values are overridden. – aw-think Jul 01 '16 at 17:23

1 Answers1

2

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

Brad
  • 722
  • 2
  • 8
  • 24