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