Vaadin 8.2.0: Как выровнять изображение в ячейке сетки по вертикали

Я хочу отображать эскизы изображений в сетке.

Это мой соответствующий код (упрощенный):

addColumnVisibilityChangeListener(event -> {
    if (ID_THUMBNAIL.equals(event.getColumn().getId())) {
        if (event.isHidden()) {
            setBodyRowHeight(-1);
        } else {
            setBodyRowHeight(130);
        }
        // needed to force rendering of current values
        getDataProvider().refreshAll();
    }
});
// rescale returns a (cached) ExternalResource, image is 120x120px max
// aspect ratio is preserved, so at least width or height is 120px
grid.addColumn(this::rescale, new ImageRenderer<>(this::showImage))
    .setCaption(ID_THUMBNAIL)
    .setStyleGenerator(r -> ID_THUMBNAIL)
    .setWidth(131);

CSS:

.asset-grid td.thumbnail {
  // height is set bij Vaadin Grid
  padding: 5px;
  text-align: center !important;    
}
.asset-grid td.thumbnail img {
  vertical-align: middle !important;
}

Работает все, кроме вертикального выравнивания миниатюрного изображения. Он отображается вверху ячейки. Я пробовал несколько настроек, но ничего не работает.


css vaadin-grid vaadin8
person rmuller    schedule 11.10.2017    source источник
comment
Вы пробовали добавить: display: table-cell; в .asset-grid td.thumbnail?   -  person 1011sophie    schedule 11.10.2017
comment
Просто попробовал, без разницы   -  person rmuller    schedule 11.10.2017
comment
У меня есть несколько рабочих приемов, но это зависит от того, как вы устанавливаете высоту строки. Поэтому было бы полезно, если бы вы могли предоставить sscce, чтобы мы могли учесть все элементы.   -  person Morfic    schedule 18.10.2017
comment
@Morfic Обновил мой вопрос (установка высоты строки). Этот код упрощен, но он содержит всю информацию, никакой другой CSS не используется (остальные - Valo по умолчанию).   -  person rmuller    schedule 18.10.2017
comment
Этого должно быть достаточно, но дайте мне знать точную версию vaadin, которую вы используете, потому что _ 1_ больше не существует в v8.1.4 + (предполагается, что это будет исправлено в версии 8.2.0)   -  person Morfic    schedule 19.10.2017
comment
@Morfic 8.2.0.alpha2   -  person rmuller    schedule 19.10.2017

Ответы (1)


arrow_upward
2
arrow_downward

Это основано главным образом на этом ответе о том, как выровнять изображение по вертикали в div с некоторыми незначительными вариации методом проб и ошибок.

Можно использовать исходный ответ с fixed line-size (например, 130) и vertical-align: middle, но обновленная версия предлагает гибкость независимо от того, какую высоту вы установили (проверено в хроме и краю).

Код:

import com.vaadin.event.ShortcutAction;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.Resource;
import com.vaadin.ui.*;
import com.vaadin.ui.renderers.ClickableRenderer;
import com.vaadin.ui.renderers.ImageRenderer;

public class GridWithImages extends VerticalLayout {

    public GridWithImages() {
        // basic grid setup
        Grid<User> grid = new Grid<>();
        grid.addColumn(User::getId)
            .setCaption("Id");
        Grid.Column<User, Resource> thumbnailColumn = grid.addColumn(User::getThumbnail)
                                                          .setCaption("Thumbnail")
                                                          .setRenderer(new ImageRenderer<>(this::showImage))
                                                          .setStyleGenerator(r -> "thumbnail")
                                                          .setWidth(131);
        grid.setItems(new User(1), new User(2), new User(3));
        grid.setBodyRowHeight(130);

        // allow to easily update height and width for testing purposes
        TextField rowHeightField = new TextField("Row height", "130");
        TextField thumbnailColumnWidthField = new TextField("Thumbnail width", "131");
        Button button = new Button("Update", event -> {
            // NOT SAFE, NOT ELEGANT, but for the sake of brevity just use those values...
            grid.setBodyRowHeight(Integer.valueOf(rowHeightField.getValue()));
            thumbnailColumn.setWidth(Integer.valueOf(thumbnailColumnWidthField.getValue()));
        });
        button.setClickShortcut(ShortcutAction.KeyCode.ENTER);

        addComponents(grid, rowHeightField, thumbnailColumnWidthField, button);
    }

    // image renderer click handler
    private void showImage(ClickableRenderer.RendererClickEvent<User> event) {
        Notification.show("This will be the actual image in full size... maybe, maybe not!");
    }

    // basic bean for easy binding
    private class User {
        private int id;
        private Resource thumbnail = new ExternalResource("https://www.gravatar.com/avatar/d9269818df2a058ad6bf9dbbaf1e8240?s=32&d=identicon&r=PG");

        public User(int id) {
            this.id = id;
        }

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }

        public Resource getThumbnail() {
            return thumbnail;
        }

        public void setThumbnail(Resource thumbnail) {
            this.thumbnail = thumbnail;
        }
    }
}

Тема:

td.v-grid-cell.thumbnail > img {
  vertical-align: unset; // leaving it centered as inherited, shifts the image a few pixels downwards
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // https://stackoverflow.com/questions/34551381/is-the-css3-transform-translate-percentage-values-relative-to-its-width-and-or-h
}

Результат:

изображение центра vaadin в сетке

person Morfic    schedule 19.10.2017
comment
Снимаю шляпу! Так что дело было только в CSS. Спасибо за все время, которое вы потратили на ответы на эти вопросы. Очень признателен! - person rmuller; 19.10.2017
comment
@rmuller Пожалуйста, в этом вся суть SO. Также да, в значительной степени связано с CSS. - person Morfic; 19.10.2017