JavaFX ListView - remove spacing / padding / margin between cells

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 ListViewin 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 ListCells 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 ListCells:

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.