diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts index c40d94db8e2a..d564000b6811 100644 --- a/packages/main/src/Form.ts +++ b/packages/main/src/Form.ts @@ -595,6 +595,8 @@ class Form extends UI5Element { getItemsInfo(items?: Array): Array { return (items || this.items).map((item: IFormItem) => { + item.setAttribute("data-sap-ui5-label-span", this.labelSpan); + return { item, // eslint-disable-next-line diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 4434bb83eec1..285745b0004a 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -9,7 +9,7 @@ display: flex; flex-direction: column; background-color: var(--sapGroup_ContentBackground); - border-radius: 0.75rem; + border-radius: 0.75rem; container-type: inline-size; } @@ -42,10 +42,14 @@ .ui5-form-column { padding-top: 0.5rem; - padding-bottom: 1rem; - box-sizing: border-box; + padding-bottom: 1rem; + box-sizing: border-box; } ::slotted([ui5-form-group]) { display: contents; } + +.ui5-form-item { + display: contents; +} \ No newline at end of file diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index 72c2e6b13dee..20565cb79e38 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -22,16 +22,29 @@ grid-column: span 6; } +:host { + display: contents; +} + .ui5-form-item-root { + display: contents; + height: 100%; container-type: inline-size; background-color: inherit; color: inherit; + order: inherit; } .ui5-form-item-layout { + order: inherit; + background-color: inherit; + height: inherit; + color: inherit; display: grid; grid-template-columns: var(--ui5-form-item-layout); - align-items: center; + grid-template-rows: subgrid; + grid-row: var(--ui5-grid-row, span 1); + align-items: var(--ui5-grid-row-align, center); } .ui5-form-item-label { @@ -65,24 +78,38 @@ } @container (max-width: 600px) { - :host { + :host .ui5-form-item-layout { order: var(--ui5-form-item-order-S, unset); } + + :host([data-sap-ui5-label-span~="S12"]) .ui5-form-item-root { + --ui5-grid-row: span 2; + --ui5-grid-row-align: start; + } } /* M - 1 column by default, up to 2 columns */ -@container (width > 600px) and (width <= 1024px) { +@container (width > 600px) and (width <=1024px) { :host { order: var(--ui5-form-item-order-M, unset); } + :host([data-sap-ui5-label-span~="M12"]) .ui5-form-item-root { + --ui5-grid-row: span 2; + --ui5-grid-row-align: start; + } } /* L - 2 columns by default, up to 3 columns */ -@container (width > 1024px) and (width <= 1440px) { +@container (width > 1024px) and (width <=1440px) { :host { order: var(--ui5-form-item-order-L, unset); } + + :host([data-sap-ui5-label-span~="L12"]) .ui5-form-item-root { + --ui5-grid-row: span 2; + --ui5-grid-row-align: start; + } } /* XL - 3 columns by default, up to 6 */ @@ -91,4 +118,8 @@ order: var(--ui5-form-item-order-Xl, unset); } + :host([data-sap-ui5-label-span~="XL12"]) .ui5-form-item-root { + --ui5-grid-row: span 2; + --ui5-grid-row-align: start; + } } \ No newline at end of file diff --git a/packages/main/test/pages/form/FormAlignment.html b/packages/main/test/pages/form/FormAlignment.html new file mode 100644 index 000000000000..d1edf389941b --- /dev/null +++ b/packages/main/test/pages/form/FormAlignment.html @@ -0,0 +1,108 @@ + + + + + + + Form Basic + + + + + +
+ +

With group element

+ + + + Number of Replicas + + + + Request/Limit CPU + + + + Maximum Java Memory (Gi) Maximum Java Memory (Gi) Maximum + Java Memory (Gi) Maximum Java Memory (Gi) + + + + Memory Scale Factor + + + + +

Without group element

+ + + Number of Replicas + + + + Request/Limit CPU + + + + Maximum Java Memory (Gi) Maximum Java Memory (Gi) Maximum Java + Memory (Gi) Maximum Java Memory (Gi) + + + + Memory Scale Factor + + + +
+
+ + +
+ +

With group element

+ + + + Number of Replicas + + + + Request/Limit CPU + + + + Maximum Java Memory (Gi) Maximum Java Memory (Gi) Maximum + Java Memory (Gi) Maximum Java Memory (Gi) + + + + Memory Scale Factor + + + + +

Without group element

+ + + Number of Replicas + + + + Request/Limit CPU + + + + Maximum Java Memory (Gi) Maximum Java Memory (Gi) Maximum Java + Memory (Gi) Maximum Java Memory (Gi) + + + + Memory Scale Factor + + + +
+ + + \ No newline at end of file