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