グリッド内にサムネイル画像を表示したい。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;
}
すべては、サムネイル画像の垂直方向の配置を除いて働きます。セルの上部に表示されます。私はいくつかの設定を試みましたが、何も動作しません。
を試してみましたd: "display:table-cell; ".asset-grid td.thumbnail? – 1011sophie
ちょうど試してみましたが、違いはありません – rmuller
私はいくつかの回避策を講じていますが、行の高さをどのように設定しているのかは分かりませんので、[sscce]私たちはすべての要素を考慮に入れることができます。 – Morfic