Wrap text / break line in a datagrid column

[carsten.hufe]

I’m just trying to use a datagrid to provide a kind of Q&A overview. Unfortunately, it cuts off the end of the question and answer. I’d like to have a behavior so that the text wraps / breaks to the next line to have the entire text available.

I built a custom renderer and this is the code:

    @Supply(to = "recommendationsDataGrid.question", subject = "renderer")
    private Renderer<Recommendation> recommendationsDataGridQuestionRenderer() {
        return new ComponentRenderer<>(
                () -> {
                    VerticalLayout layout = createVerticalLayout();
                    Span question = new Span();
                    layout.add(question);
                    Span span = new Span();
                    span.addClassNames(LumoUtility.TextColor.SECONDARY, LumoUtility.FontSize.SMALL);
                    layout.add(span);
                    return layout;
                },
                (component, recommendation) -> {
                   ((Span)component.getComponentAt(0)).setText("Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text Very long question text ");
                   ((Span)component.getComponentAt(1)).setText("Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text Very long answer text ");
                }
        );
    }

    protected VerticalLayout createVerticalLayout() {
        VerticalLayout layout = uiComponents.create(VerticalLayout.class);
        layout.setSpacing(true);
        layout.setPadding(false);
        layout.setMargin(false);
        layout.addClassNames(LumoUtility.LineHeight.MEDIUM, LumoUtility.FlexWrap.WRAP);
        return layout;
    }

Any ideas how the text can wrap?

[gorelov (Gleb Gorelov)]

Hi,

Spans have auto width by default. To have word wrapping you need to set width, e.g. 100% and white-space: normal:

Span question = new Span();
question.setWidthFull();
question.addClassName(LumoUtility.Whitespace.NORMAL);

Regards,
Gleb