Items are not rendered

[javier-godoy]

The following example produces empty grids:

@Route
public class MainView extends VerticalLayout {
  public MainView() {
    List<String> options = List.of("A", "B", "C", "D", "E", "F", "G");
    TwinColGrid<String> twin = new TwinColGrid<>(options);
    twin.addColumn(x -> x, "header");
    twin.withSizeFull();
    add(twin);
  }
}

I tested versions 2.8.0 2.9.1, 2.9.2-SNAPSHOT of this addon with Vaadin 23.1.17, 23.2.10 and 23.2.17

[flang]

I wasn't able to reproduce the issue. Items were properly rendered. BTW Vaadin 23.2.15 is latest release of 23.2.x

[javier-godoy]

Please find attached. After further analysis I found that this behavior is caused by https://github.com/vaadin/web-components/issues/4584.

As a workaround I set min-height: 165px to the TwinColGrid component in application styles, so that the grid is at least as large as the buttons (which IMHO makes a good default for the addon, since it packs two grid inside of flex containers)

[flang]

Setting height to TwinColGrid parent layout works fine. IMO it's not a TwinColGrid issue.

[rodolforfq]

I'm able to reproduce this issue on both V23 and V24, when using the 2.9.2 version of the addon. I used this snippet:

public class TwinColGridAddon extends VerticalLayout {

    public TwinColGridAddon() {
        Set<String> selectedDays = new HashSet<>();
        List<String> availableDays = List.of("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

        var twinColGrid = new TwinColGrid<>(availableDays)
                .addSortableColumn(String::toString, Comparator.comparing(String::toString), "Day")
                .withAvailableGridCaption("Available Options")
                .withSelectionGridCaption("Selected Options")
                .withoutAddAllButton()
                .withSizeFull()
                .withDragAndDropSupport()
                .withSelectionGridReordering()
                .selectRowOnClick();
        twinColGrid.setCaption("Weekdays Selection");
        twinColGrid.setValue(selectedDays);

        add(twinColGrid);
        setSizeFull();
    }

}

Notice the last line - setSizeFull(). If I don't do this to make the underlying container apply a 100% (or any other fixed height), the 2 Grids are not visible (the horizontal layout containing both of them and the buttons on the other hand, does display just fine).

It can be quite confusing for a first time user that none of the elements/grid items is visible. I think it would be appropriate to include a min-height value as suggested by @javier-godoy on his earlier comment, so the user knows it's a size limitation and not a bug (if I as a user am able to see at least 1 of the items, the scroll bars will be a good hint as to get what is happening. Right now, both Grids are just "invisible" and you can't really get what is going on unless you dig into the DOM).