Malformed ItemDetailsRenderer

Support
#1

I’m trying to implement Vaadin’s ItemDetailsRenderer with a TabSheet, but the appearence is malformed.

In my onInit event, I’m calling:

screensesDataGrid.setItemDetailsRenderer(createMagerDetailsRenderer());

Which contains the following:

    private static ComponentRenderer<MagerDetailsFormLayout, Screens> createMagerDetailsRenderer() {
        return new ComponentRenderer<>(MagerDetailsFormLayout::new,
                MagerDetailsFormLayout::setDetails);
    }

This class then extends TabSheet, and I’m creating a tab as follows:

private static class MagerDetailsFormLayout extends TabSheet {
        private final TextField nameField = new TextField("Name");
        private final TextField ipField = new TextField("IP");

        Tab details = add("Details", new Span());
        Tab tiles = add("Tiles", new Div());
        //Tab tab2 = new Tab("Tiles");
        public MagerDetailsFormLayout() {

            Stream.of(nameField, ipField).forEach(field -> {
                field.setReadOnly(true);
                details.add(field);
            });
//            setResponsiveSteps(new ResponsiveStep("50%", 3));
//            setColspan(nameField, 3);
//            setColspan(ipField, 3);
        }

        public void setDetails(Screens screens) {
            nameField.setValue(screens.getScreenName());
            ipField.setValue(screens.getSIMCards().getComputerIP());

        }
    }

However, the tab comes out like this:

image

Is there an easier way to have it render tabs?

#2

Fixed it with the below:

 private static class MagerDetailsFormLayout extends TabSheet {
        private final TextField nameField = new TextField("Name");
        private final TextField ipField = new TextField("IP");
        private final TextField brightnessField = new TextField("Brightness (Type)");
        private final Div detailsDiv = new Div();
        private final Div tilesDiv = new Div();
        Tab details = add("Details", detailsDiv);
        Tab tiles = add("Tiles", tilesDiv);


        //Tab tab2 = new Tab("Tiles");
        public MagerDetailsFormLayout() {
            ipField.setReadOnly(true);
            nameField.setReadOnly(true);
            brightnessField.setReadOnly(true);
            detailsDiv.add(nameField, new Html("<br>"), ipField, brightnessField);
            details.add();
            tiles.add();

        }

        public void setDetails(Screens screens) {
            nameField.setValue(screens.getScreenName());
            ipField.setValue(screens.getSIMCards().getComputerIP());
            brightnessField.setValue("55% (Auto) | Dummy Data");

        }
    }