AttributeForm: hide parent when child is active

Ensures child controls heigth of editing panel

Author: rsrg-zwiama

components/AttributeForm.jsx

@@ -147,11 +147,11 @@ class AttributeForm extends React.Component {
             readOnlyMsg = LocaleUtils.tr("editing.geomnonzeroz");
         }
         return (
-            <div className="AttributeForm">
+            <div className={`AttributeForm ${this.state.childEdit ? "attrib-form-has-child" : ""}`}>
                 {readOnlyMsg ? (
                     <div className="attrib-form-geom-readonly">{readOnlyMsg}</div>
                 ) : null}
-                <form action="" onChange={ev => this.formChanged(ev)} onSubmit={this.onSubmit} ref={this.setupChangedObserver}>
+                <form action="" className="attrib-form-parent-form" onChange={ev => this.formChanged(ev)} onSubmit={this.onSubmit} ref={this.setupChangedObserver}>
                     {editConfig.form ? (
                         <QtDesignerForm addRelationRecord={this.addRelationRecord} editConfig={editConfig}
                             editRelationRecord={this.editRelationRecord}

components/style/AttributeForm.css

@@ -5,7 +5,12 @@ div.AttributeForm {
     padding: 0.25em;
 }
 
-div.AttributeForm > form {
+.AttributeForm.attrib-form-has-child > :not(.link-feature-form-container),
+.AttributeForm.attrib-form-has-child ~ .link-feature-form-close{
+    display: none;
+}
+
+div.AttributeForm > form.attrib-form-parent-form {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -41,15 +46,9 @@ div.AttributeForm div.attrib-form-busy {
 }
 
 div.link-feature-form-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(200, 200, 200, 0.5);
-    padding: 1em;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
 div.link-feature-form-container > div.link-feature-form {

components/style/LinkFeatureForm.css

@@ -3,13 +3,15 @@ div.link-feature-form {
     border: 2px solid var(--border-color);
     display: flex;
     flex-direction: column;
+    min-height: 0;
     padding: 0.5em;
     height: 100%;
 }
 
 div.link-feature-form > div.AttributeForm {
     flex: 1 1 auto;
-    height: 0;
+    min-height: 0;
+    overflow-y: auto;
 }
 
 div.link-feature-form-feature-list {