Vaadin 8: Как вывести полноразмерную картинку в сетку?

Я пытаюсь отобразить список людей в сетке Vaadin 8, включая их фотографии (JPEG в байтах []). Однако в столбце компонентов (см. Код ниже) видна только верхняя часть изображения.

personsGrid.addComponentColumn(v -> {
    if (v.getPhoto() != null) {
            Image personsPhoto = new Image();
            displayImage(personsPhoto, v.getPhoto());
            return personsPhoto;
    } 
    return new Image("", new ThemeResource("img/no-picture.jpg"));
});

Есть ли способ показать полноразмерное изображение в сетке? Как вообще заставить строки сетки регулировать свою высоту в зависимости от высоты содержимого?


vaadin vaadin-grid vaadin8
person Serge Iroshnikov    schedule 12.12.2019    source источник
comment
Насколько мне известно. Для динамических высот в строках сетки такой функции нет. Вы можете явно установить высоту всех строк, переопределив базовый CSS. Но вы не можете заставить их настраиваться автоматически.   -  person Jay    schedule 12.12.2019
comment
Спасибо @Jay, похоже, так. Не могли бы вы подсказать, какие стили CSS отвечают за высоту строки сетки?   -  person Serge Iroshnikov    schedule 12.12.2019
comment
Это объясняется в официальных документах Vaadin: vaadin.com/docs/v8/ framework / components / components-grid.html   -  person Julius Hörger    schedule 12.12.2019

Ответы (1)


arrow_upward
3
arrow_downward

Как упоминалось в комментарии под вопросом, этого нельзя достичь динамически, но вы можете явно установить высоту строки сетки с помощью CSS.

Что-то в этом роде должно подсказать вам верное направление:

Java:

final Grid<SomeBean> grid = new Grid<>();
grid.addStyleName("custom-grid-style");

CSS:

.custom-grid-style .v-grid-body .v-grid-row .v-grid-cell {
    min-height: 50px;
    line-height: 50px;
}

И если вы не знаете, где изменить CSS, вам нужно добавить аннотацию @StyleSheet либо в класс, который вы редактируете, либо в пользовательский интерфейс. И тогда файл .css должен находиться в том же месте пакета в папке ресурсов.

Например:

Класс находится в пакете: com.example.components

Тогда ваш файл CSS будет в: src/main/resources/com/example/components

person Jay    schedule 12.12.2019