Merge pull request #2153 from andes/fix-virtual-scroll-select

fix(forms-crud): altura extra para plex-select
andes · Mar 5, 2021 · 251a699 · 251a699
2 parents 7552a71 + 6387bf3
commit 251a699
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/app/modules/forms-builder/components/forms-crud/forms-crud.component.html b/src/app/modules/forms-builder/components/forms-crud/forms-crud.component.html
@@ -30,7 +30,7 @@
                 </plex-button>
             </plex-title>
 
-            <cdk-virtual-scroll-viewport [itemSize]="60">
+            <cdk-virtual-scroll-viewport [itemSize]="60" #vs>
                 <div class="row mb-4 mb-2-md" id="wrapper-{{ i }}"
                      *cdkVirtualFor="let field of form.fields; let i = index">
 

diff --git a/src/app/modules/forms-builder/components/forms-crud/forms-crud.component.ts b/src/app/modules/forms-builder/components/forms-crud/forms-crud.component.ts
@@ -1,6 +1,7 @@
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { Plex } from '@andes/plex';
 import { Location } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Form, FormsService } from '../../services/form.service';
 import { FormResourcesService } from '../../services/resources.service';
@@ -38,6 +39,8 @@ export class AppFormsCrudComponent implements OnInit {
     };
     private formToUpdate: Form;
 
+    @ViewChild('vs', { static: true }) virtualScroll: CdkVirtualScrollViewport;
+
     constructor(
         private plex: Plex,
         private formsService: FormsService,
@@ -120,6 +123,11 @@ export class AppFormsCrudComponent implements OnInit {
             if (element) {
                 element.scrollIntoView({ block: 'end', behavior: 'smooth' });
             }
+
+            const virtualWrapper = this.virtualScroll.elementRef.nativeElement;
+            if (virtualWrapper) {
+                virtualWrapper.style.height = `calc(${virtualWrapper.getBoundingClientRect().height}px + 37px)`;
+            }
         }, 100);
     }
 

diff --git a/src/app/modules/forms-builder/components/forms-crud/forms-crud.scss b/src/app/modules/forms-builder/components/forms-crud/forms-crud.scss
@@ -1,7 +1,9 @@
 ::ng-deep {
-    plex-int, plex-bool {
+    plex-int,
+    plex-bool {
         &.sm {
-            .form-group, .form-control {
+            .form-group,
+            .form-control {
                 width: 60px;
             }
         }
@@ -17,8 +19,10 @@
         position: relative;
         bottom: 15px;
     }
-
+    .cdk-virtual-scroll-content-wrapper {
+        height: 100%;
+    }
 }
 cdk-virtual-scroll-viewport {
-    height: calc(100% -  205px);     
-}
+    height: 100%;
+}