diff --git a/packages/main/src/FormTemplate.tsx b/packages/main/src/FormTemplate.tsx index e01f5a6709e6b..0675123fba371 100644 --- a/packages/main/src/FormTemplate.tsx +++ b/packages/main/src/FormTemplate.tsx @@ -24,7 +24,7 @@ export default function FormTemplate(this: Form) { {this.hasCustomHeader ? : - {this.headerText} + {this.headerText} } } @@ -55,7 +55,7 @@ function groupedItemsLayout(this: Form) { > {groupItem.headerText &&
- {groupItem.headerText} + {groupItem.headerText}
} {this.accessibleMode === "Edit" ? diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css index 4824f1c4ed84b..d530c2ac5e8d7 100644 --- a/packages/main/src/themes/Form.css +++ b/packages/main/src/themes/Form.css @@ -1,6 +1,10 @@ @import "./FormLayout.css"; @import "./FormItemSpan.css"; +* { + box-sizing: border-box; +} + :host { display: block; container-type: inline-size; @@ -38,12 +42,14 @@ height: var(--_ui5-form-group-heading-height); line-height: var(--_ui5-form-group-heading-height); padding-inline-start: 0.25rem; + overflow: hidden; } .ui5-form-column { padding-top: 0.5rem; padding-bottom: 1rem; box-sizing: border-box; + min-width: 0; } ::slotted([ui5-form-group]) { diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css index f1ba4e9970e53..79facc776e830 100644 --- a/packages/main/src/themes/FormItem.css +++ b/packages/main/src/themes/FormItem.css @@ -7,6 +7,10 @@ break-inside: avoid; } +* { + box-sizing: border-box; +} + .ui5-form-item-root { background-color: inherit; color: inherit; diff --git a/packages/main/src/themes/FormItemSpan.css b/packages/main/src/themes/FormItemSpan.css index 0334a46815c32..9968056a83de3 100644 --- a/packages/main/src/themes/FormItemSpan.css +++ b/packages/main/src/themes/FormItemSpan.css @@ -6,6 +6,10 @@ * The ratio can be changed via the labelSpan and the emptySpan properties. */ +* { + box-sizing: border-box; +} + :host { --ui5-form-item-label-justify-internal: start; --ui5-form-item-label-padding-internal: 0.625rem 0.25rem 0 0.25rem; diff --git a/packages/main/src/themes/FormLayout.css b/packages/main/src/themes/FormLayout.css index 86bbbf59faced..485056a5b6e96 100644 --- a/packages/main/src/themes/FormLayout.css +++ b/packages/main/src/themes/FormLayout.css @@ -6,6 +6,10 @@ * S max-width: 600px - container padding 24px */ +* { + box-sizing: border-box; +} + /* S - 1 column */ @container (width < 600px) { .ui5-form-layout { diff --git a/packages/main/test/pages/form/FormTitleTruncation.html b/packages/main/test/pages/form/FormTitleTruncation.html new file mode 100644 index 0000000000000..8e3f5155ee7fe --- /dev/null +++ b/packages/main/test/pages/form/FormTitleTruncation.html @@ -0,0 +1,77 @@ + + + + + + + Form Basic + + + + + + + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + Label: + + + + + + + \ No newline at end of file