diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js index 792398d0a0..853ff71d60 100644 --- a/packages/form-layout/src/vaadin-form-layout-mixin.js +++ b/packages/form-layout/src/vaadin-form-layout-mixin.js @@ -475,6 +475,10 @@ export const FormLayoutMixin = (superClass) => child.style.removeProperty('--_grid-colspan'); } + if (child.localName === 'vaadin-form-item' && child.$) { + child.$.content.setAttribute('auto-responsive', ''); + } + maxColumns = Math.max(maxColumns, columnCount); }); diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js index d6b210125e..0a010773a4 100644 --- a/packages/form-layout/src/vaadin-form-layout-styles.js +++ b/packages/form-layout/src/vaadin-form-layout-styles.js @@ -111,6 +111,8 @@ export const formLayoutStyles = css` /* By default, place each child on a new row */ grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count)); + box-sizing: border-box; + max-width: 100%; } :host([auto-responsive][auto-rows]) #layout ::slotted(*) { @@ -161,6 +163,8 @@ export const formRowStyles = css` --_form-item-labels-aside: inherit; grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count)); + box-sizing: border-box; + max-width: 100%; } ::slotted(:first-child) { @@ -177,7 +181,7 @@ export const formItemStyles = css` display: inline-flex; align-items: var(--_form-item-labels-aside, baseline); flex-flow: var(--_form-item-labels-above, column) nowrap; - justify-self: stretch; + align-self: stretch; margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0; } @@ -207,6 +211,11 @@ export const formItemStyles = css` flex: 1 1 auto; } + #content[auto-responsive] ::slotted(*) { + box-sizing: border-box; + max-width: 100%; + } + #content ::slotted(.full-width) { box-sizing: border-box; width: 100%; diff --git a/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js b/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js index 189cff022e..ea4465047a 100644 --- a/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js +++ b/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js @@ -354,4 +354,35 @@ describe('form-layout auto responsive', () => { await visualDiff(container, 'colspan-with-explicit-rows'); }); }); + + describe('fields with explicit width', () => { + beforeEach(async () => { + element = fixtureSync( + ` + + + + + + + + + + + + + + + + + `, + container, + ); + await nextFrame(); + }); + + it('default', async () => { + await visualDiff(container, 'fields-with-explicit-width'); + }); + }); }); diff --git a/packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png new file mode 100644 index 0000000000..9bec5ff241 Binary files /dev/null and b/packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png differ diff --git a/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js b/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js index 7b7f43e0b1..592b956260 100644 --- a/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js +++ b/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js @@ -354,4 +354,35 @@ describe('form-layout auto responsive', () => { await visualDiff(container, 'colspan-with-explicit-rows'); }); }); + + describe('fields with explicit width', () => { + beforeEach(async () => { + element = fixtureSync( + ` + + + + + + + + + + + + + + + + + `, + container, + ); + await nextFrame(); + }); + + it('default', async () => { + await visualDiff(container, 'fields-with-explicit-width'); + }); + }); }); diff --git a/packages/form-layout/test/visual/material/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/packages/form-layout/test/visual/material/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png new file mode 100644 index 0000000000..11ebb53a9a Binary files /dev/null and b/packages/form-layout/test/visual/material/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png differ