JavaFX ListView - 删除单元格之间的间距/填充/边距

Question

As I have custom cells for a particular ListView , I have big trouble to understand how to to remove the "natural" sort of margin / spacing there is between each cells, and, even worse, on the right and left sides of said cells.

Here's an example:

] 1

As you can see, I use a color to bring out each cell. You cannot see the space at the end of the cells (on their right side), because I need to scroll, but you can trust me, the white space is equal on each side (bigger on the left & right, though...) which is not normal as I have specifically designed these cells so that their width is as large as the ListView so that there is no need to use horizontal scrolling. My issue kinds of defeat my purpouse...

Each cell consists of one AnchorPane with the image and the one label. The AnchorPane is painted in yellow ( -fx-background-color: yellow; ).

And as you can clearly see, there is these white spaces all around the cells.

FYI, here I am using JavaFX 8 / 2.2 SDK but I intend to use JFoenix JFXListView & JFXListCell . However, the spacing is even worse using those.

Strange point: I also painted the ListView in green, but such color is nowhere. to be seen. I guess all the cells (and the empty one) overwrites the ListView content, so it would make sense not to see its background. However, this means the cells are somehow "corrupted" since white spaces are "added" all around my cells.

I have tried to set padding to 0 for everything but in vain.

Finally, in the onUpdateItem method, I do call the super method and when the cell is not flagged as empty , I set the graphic to the aforementioned AnchorPane otherwise I set it to null, which is clearly consistent to my screenshot.

Thanks for the help !

Answer 1

If you look at the default CSS stylesheet for JavaFX, modena.css , you'll see:

.list-cell {
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
}

This is where the padding for the ListCell s is coming from. To remove this padding simply add your own stylesheet which contains:

.list-cell {
    -fx-padding: 0px;
}

Or call setStyle for each of your ListCell s:

setStyle("-fx-padding: 0px;");

The second option would best be done by using a custom cell factory .

listView.setCellFactory(v -> new ListCell<>() {

    {
        setStyle("-fx-padding: 0px");
    }

    @Override
    protected void updateItem(Object item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            setText(null);
            setGraphic(null);
        } else {
            // your custom display logic
        }
    }

});

Also, after some quick testing with JFoenix it looks like using the above will also work for JFXListCell ; though you have to be careful about overriding updateItem because JFXListCell does a lot in its implementation.

Answer 2

I set the red background of the cell as default to make sure that the artifacts I see between cells are in fact created by the .list-cell .

No matter how hard I tried, I could not get rid of it, even with the padding 0px . The red background was still visible every other cell in my case.

I suppose, it is a rounding error...

So, the only thing that worked was using a negative padding to remove any spacing | padding | margin between cells.

.list-cell{
    -fx-font-weight: normal;
    -fx-text-fill: white;
    -fx-padding: -1px;
    -fx-background-color: red;
}