From e4d1c65081c5b0b136600c01db5cdd6cf510502f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 13 Dec 2022 09:35:34 +0100 Subject: [PATCH] Make our default layout stylesheet handle area as flexbox, similar to backoffice styling. (#13534) --- .../blockgrid/umbraco-blockgridlayout-flexbox.css | 3 +++ .../propertyeditors/blockgrid/umbraco-blockgridlayout.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css index 5dcc95a61d..7c37c48f0d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout-flexbox.css @@ -22,6 +22,9 @@ } .umb-block-grid__area { position: relative; + height: 100%; + display: flex; + flex-direction: column; --umb-block-grid__area-calc: calc(var(--umb-block-grid--area-column-span) / var(--umb-block-grid--area-grid-columns, 1)); width: calc(var(--umb-block-grid__area-calc) * 100% - (1 - var(--umb-block-grid__area-calc)) * var(--umb-block-grid--areas-column-gap, 0px)); } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css index 4765c9c45e..8a4f567cac 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css @@ -28,6 +28,9 @@ } .umb-block-grid__area { position: relative; + height: 100%; + display: flex; + flex-direction: column; /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */ grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns)); grid-row: span var(--umb-block-grid--area-row-span, 1);