From 819a453c1a9dd8c55a89c6c32c34e73f9e127e86 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Wed, 15 Jan 2025 11:21:35 +0200
Subject: [PATCH] fix(ui5-form): prevent content overflow (#10552)
If the content of an item exceeds the width of the ui5-form-item, it will overflow. With this change, the content now grows to the width of the ui5-form-item.
Fixes: https://github.com/SAP/ui5-webcomponents/issues/10473
---
packages/main/src/themes/FormItem.css | 9 +-
.../test/pages/form/FormWithElements.html | 237 ++++++++++++++++++
2 files changed, 241 insertions(+), 5 deletions(-)
create mode 100644 packages/main/test/pages/form/FormWithElements.html
diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css
index e7fa0525538d..72c2e6b13dee 100644
--- a/packages/main/src/themes/FormItem.css
+++ b/packages/main/src/themes/FormItem.css
@@ -17,6 +17,7 @@
:host([column-span="5"]) {
grid-column: span 5;
}
+
:host([column-span="6"]) {
grid-column: span 6;
}
@@ -40,6 +41,8 @@
}
.ui5-form-item-content {
+ overflow: hidden;
+ width: 100%;
display: flex;
padding: 0 0.25rem;
}
@@ -57,13 +60,9 @@
box-sizing: border-box;
}
-::slotted([ui5-input]) {
+::slotted(*) {
width: 100%;
}
-::slotted([ui5-select]) {
- width: 100%;
-}
-
@container (max-width: 600px) {
:host {
diff --git a/packages/main/test/pages/form/FormWithElements.html b/packages/main/test/pages/form/FormWithElements.html
new file mode 100644
index 000000000000..8c34810f8cde
--- /dev/null
+++ b/packages/main/test/pages/form/FormWithElements.html
@@ -0,0 +1,237 @@
+
+
+
+
+
+
+ Form Basic
+
+
+
+
+
+
+
+ Without DIV
+
+
+
+ With DIV
+
+
+
+
+
+ Input with hint
+
+
+ Hint for the user
+
+
+
+ ui5-toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ui5-avatar-group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ui5-avatar-group
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ui5-checkbox
+
+
+
+ ui5-switch
+
+
+
+ ui5-radio-button
+
+
+
+ ui5-radio-button
+
+
+
+ ui5-combobox
+
+
+
+ ui5-date-picker
+
+
+
+ ui5-daterange-picker
+
+
+
+ ui5-datetime-picker
+
+
+
+ ui5-file-uploader
+
+ Upload
+
+
+
+ ui5-input
+
+
+
+ ui5-multi-combobox
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ui5-multi-input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ui5-range-slider
+
+
+
+ ui5-select
+
+ Very long long long long long long long long long long long long long long long long long
+ long value
+
+
+
+ ui5-slider
+
+
+
+ ui5-step-input
+
+
+
+ ui5-textarea
+
+
+
+ ui5-time-picker>
+
+
+
+ ui5-tokenizer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file