fix #945 Select inner divs overlap outer divs height

DominoKit · Jul 26, 2024 · 79e3cac · 79e3cac
1 parent 6f96c7b
commit 79e3cac
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/forms/ValueBox.java b/domino-ui/src/main/java/org/dominokit/domino/ui/forms/ValueBox.java
@@ -28,6 +28,7 @@
 import java.util.Optional;
 import java.util.function.Consumer;
 import jsinterop.base.Js;
+import org.dominokit.domino.ui.grid.flex.FlexAlign;
 import org.dominokit.domino.ui.grid.flex.FlexItem;
 import org.dominokit.domino.ui.grid.flex.FlexLayout;
 import org.dominokit.domino.ui.style.Color;
@@ -211,14 +212,15 @@ public T setFieldStyle(FieldStyle fieldStyle) {
 
   private void layout() {
 
-    fieldInnerContainer = FlexLayout.create();
+    fieldInnerContainer = FlexLayout.create().css("field-inner-cntr");
     fieldInnerContainer.appendChild(
         inputContainer.css("field-input-cntr").setFlexGrow(1).appendChild(inputElement));
 
     fieldGroup.appendChild(
         fieldContainer.appendChild(
             fieldInnerContainer.apply(
                 self -> {
+                  self.setAlignItems(FlexAlign.STRETCH);
                   mandatoryAddOn = createMandatoryAddOn();
                   if (nonNull(mandatoryAddOn)) {
                     self.appendChild(DominoElement.of(mandatoryAddOn).css("field-mandatory-addon"));

diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/forms/domino-ui-forms.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/forms/domino-ui-forms.css
@@ -151,10 +151,15 @@
     color: #F44336;
 }
 
+.field-inner-cntr {
+    height: 100%;
+}
+
 .field-group .field-input-cntr {
     position: relative;
     background-color: inherit;
     width: 100%;
+    height:100%;
 }
 
 .field-cntr .flex-layout,
@@ -176,7 +181,7 @@
 .field-group.lined.d-select .field-cntr .flex-layout {
     position: relative;
     bottom: 4px;
-    align-items: center;
+    align-items: stretch;
 }
 
 .table-cm-filter .field-group.lined.dui-datebox .field-cntr .flex-layout,
@@ -244,7 +249,7 @@
 }
 
 .field-group .select-button {
-    height: 35px;
+    height: 100%;
     line-height: 35px;
 }