BUG: fix go-select dropdowns being cut off in go-accordian-panels (#267)

* BUG: Fix go-select dropdowns being cut off in go-accordion-panels
mobi · Oct 14, 2019 · cb31eba · cb31eba
1 parent 2668e0a
commit cb31eba
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/projects/go-lib/src/lib/animations/accordion.animation.ts b/projects/go-lib/src/lib/animations/accordion.animation.ts
@@ -12,10 +12,12 @@ import { easing, timing } from './_configs';
 export const accordionAnimation: AnimationTriggerMetadata = trigger('accordionAnimation', [
   state('open', style({
     height: '*',
+    overflow: 'visible',
     visibility: 'visible'
   })),
   state('close', style({
     height: 0,
+    overflow: 'hidden',
     visibility: 'hidden'
   })),
   transition('open <=> close', [

diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss
@@ -6,7 +6,7 @@
   border: 1px solid $theme-light-border;
   border-bottom-width: 0;
   color: $theme-light-color;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
 }
 

diff --git a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.html b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.html
@@ -37,13 +37,25 @@
 
   <go-accordion [showIcons]="true" class="go-column go-column--100">
     <go-accordion-panel title="Test 1" icon="home" expanded="true">
-      <p class="go-body-copy">This is some content for Test 1.</p>
+      <div class="go-column go-column--100">
+        <go-select
+          [items]="selectData"
+          [control]="selectControl"
+          bindValue="value"
+          bindLabel="name"
+          placeholder="Select Box Placeholder"
+          label="Select Box Here">
+        </go-select>
+      </div>
     </go-accordion-panel>
-    <go-accordion-panel title="Test 2" icon="settings">
-      <p class="go-body-copy">This is a second thing.</p>
+    <go-accordion-panel title="Test 2" icon="home" expanded="true">
+      <p class="go-body-copy">This is some content for Test 2.</p>
     </go-accordion-panel>
-    <go-accordion-panel title="Test 3" icon="landscape">
+    <go-accordion-panel title="Test 3" icon="settings">
       <p class="go-body-copy">This is a third thing.</p>
     </go-accordion-panel>
+    <go-accordion-panel title="Test 4" icon="landscape">
+      <p class="go-body-copy">This is a fourth thing.</p>
+    </go-accordion-panel>
   </go-accordion>
 </div>
diff --git a/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts b/projects/go-tester/src/app/components/off-canvas-test/off-canvas-test.component.ts
@@ -1,9 +1,26 @@
 import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'off-canvas-test',
   templateUrl: './off-canvas-test.component.html'
 })
 export class OffCanvasTestComponent {
-
+  selectData: any = [{
+    value: 1,
+    name: 'Harry'
+  }, {
+    value: 2,
+    name: 'Hermione'
+  }, {
+    value: 3,
+    name: 'Ron'
+  }, {
+    value: 4,
+    name: 'Voldermort'
+  }, {
+    value: 5,
+    name: 'Snake'
+  }];
+  selectControl: FormControl = new FormControl();
 }