JavaFX8 CustomRowFactory ContextMenu background image not entirely visible

Question

I've set the following custom row factory:

treeTblViewFiles.setRowFactory(new Callback<TreeTableView<FileModel>, TreeTableRow<FileModel>>() {

            @Override
            public TreeTableRow<FileModel> call(TreeTableView<FileModel> treeTableView) {
                final TreeTableRow<FileModel> row = new TreeTableRow<>();
                final ContextMenu rowMenu = new ContextMenu();
                MenuItem removeItem = new MenuItem("Remove");
                removeItem.setOnAction(new EventHandler<ActionEvent>() {

                    @Override
                    public void handle(ActionEvent t) {
                        int currentPlaylistIndex = m_playlists.indexOf(row.getTreeItem().getParent().getValue());
                        boolean itemRemoved = false;
                        if (row.getItem().getClass().equals(Song.class)) {
                            itemRemoved = m_playlists.get(currentPlaylistIndex).getSongs().remove(row.getItem());
                            m_playlists.get(currentPlaylistIndex).updatePlaylist((Song) row.getItem());
                        } else if (row.getItem().getClass().equals(Playlist.class)) {
                            itemRemoved = m_playlists.remove(row.getTreeItem().getValue());
                        }
                        TreeItem<FileModel> treeItem = row.getTreeItem();
                        // may need to check treeItem.getParent() is not null:
                        treeItem.getParent().getChildren().remove(treeItem);
                        treeTblViewFiles.getSelectionModel().clearSelection();
                        if (MyApp.DEBUG) {
                            System.out.println(m_playlists.size());
                            if (currentPlaylistIndex > -1) {
                                System.out.println(m_playlists.get(currentPlaylistIndex).getSongs().size());
                            }
                        }
                    }
                });
                rowMenu.getItems().add(removeItem);
                row.contextMenuProperty().bind(Bindings.when(Bindings.isNotNull(row.itemProperty()))
                        .then(rowMenu)
                        .otherwise((ContextMenu) null));
                return row;
            }

        });

and in my css I have:

/******************
 * ContextMenu
 ******************/
.context-menu{
        -fx-background-color: transparent;
}
.context-menu .menu-item{
    -fx-background-image: url("styles/cm_bg.png");
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
        -fx-background-color: transparent;
}
.context-menu .menu-item .label{
        -fx-text-fill: #ababab;
    -fx-font-weight: normal;
    -fx-font-size: 12pt;
}

The problem is that it doesn't show the entire image(which is 220x40) but only the width that suits the 'Remove' string. The right-most part is cut.

EDIT: Simplified version(the same result goes for a contextMenu on a Label):

ContextMenu cm = new ContextMenu();
MenuItem mi = new MenuItem("Test");
cm.getItems().addAll(mi);
lblUploader.setContextMenu(cm);

Why is that happening and how to solve it?

Thanks in advance.

Answer 1

Problem solved with the following .css:

.context-menu {
    -fx-background-color: transparent;  
    -fx-min-width: <image_width>;
    -fx-min-height: <image_height>; 
}

Just remember to set the preferred(or min) sizes.