Vaadin Grid - extra space between rows

Flow
1

Hello,

I have a generated template from https://start.vaadin.com/ - master-details exactly.

I made a few changes to the code and as a result it gets a weird space between the rows which disappears when I click on any line.

![First]
(https://i.ibb.co/kHsVCrd/1.png)

![After]
(https://i.ibb.co/ys4C0Qs/2.png)

Please help.
Thanks

2

What changes did you make?

3

I use pagination: https://github.com/Klaudeta/grid-pagination/blob/master/src/main/java/org/vaadin/klaudeta/PaginatedGrid.java

Some code (Kotlin):

		private val grid = PaginatedGrid<Material>()
	...
	    grid.dataProvider = materialCrudServiceDataProvider
        grid.pageSize = 15
        grid.setPaginatorSize(5)
        grid.setPaginatorTexts("Strona", "z")
        grid.paginationLocation = PaginatedGrid.PaginationLocation.TOP
	...
	    private fun createGridLayout(splitLayout: SplitLayout) {
        val wrapper = Div()
        wrapper.setId("grid-wrapper")
        wrapper.setWidthFull()
        splitLayout.addToPrimary(wrapper)
        wrapper.add(grid)
		}
	... 
		.materials-view {
		  display: flex;
		  height: 100%;
		  flex-direction: column;
		}

		.materials-view .grid-wrapper {
		  flex-grow: 1;
		  width: 100%;
		  height: 100%;
		}

		.materials-view .full-size {
		  width: 100%;
		  height: 100%;
		}

		.materials-view #editor-layout {
		  width: 400px;
		  display: flex;
		  flex-direction: column;
		}

		.materials-view #editor {
		  padding: var(--lumo-space-l);
		  flex-grow: 1;
		}

		.materials-view #button-layout {
		  width: 100%;
		  flex-wrap: wrap;
		  background-color: var(--lumo-contrast-5pct);
		  padding: var(--lumo-space-s) var(--lumo-space-l);
		}

Thanks for reply

4

My guess would be that it is related to the broken images. Unless you have changed the code I think they have height: 64px but are then rendered as 16px or something when they are broken

5

Thank you! This is exactly the cause!

How to handle missing image to properly render column without broken image? The image in the object may be null.

        val imageRenderer = TemplateRenderer
            .of<Material>("<img style='height: 64px' src='[[item.image]
]' />")
            .withProperty("image") { obj: Material -> obj.image }
        grid.addColumn(imageRenderer).setHeader("Picture").setWidth("68px").flexGrow = 0