fix(accordion): include margins during expand animation

Closes ionic-team#26381
kemp · Nov 30, 2022 · 0742dae · 0742dae
1 parent db4cdeb
commit 0742dae
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/core/src/components/accordion/accordion.scss b/core/src/components/accordion/accordion.scss
@@ -57,6 +57,14 @@
   max-height: 0;
 }
 
+/**
+ * Prevent margins of content-wrapper
+ * from collapsing, breaking the animation.
+ */
+:host(.accordion-expanding) #content-wrapper {
+  overflow: auto;
+}
+
 :host(.accordion-disabled) #header,
 :host(.accordion-readonly) #header,
 :host(.accordion-disabled) #content,

diff --git a/core/src/components/accordion/test/standalone/index.html b/core/src/components/accordion/test/standalone/index.html
@@ -77,6 +77,26 @@ <h2>Item In Content</h2>
             </ion-accordion>
           </ion-accordion-group>
         </div>
+
+        <div class="grid-item">
+          <h2>Margins In Content</h2>
+
+          <ion-accordion-group value="first">
+            <ion-accordion value="first">
+              <ion-item slot="header"> Accordion </ion-item>
+              <ion-card slot="content" style="margin: 100px 16px">
+                <ion-card-header>
+                  <ion-card-title>Card Title</ion-card-title>
+                  <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+                </ion-card-header>
+
+                <ion-card-content>
+                  Here's a small text description for the card content. Nothing more, nothing less.
+                </ion-card-content>
+              </ion-card>
+            </ion-accordion>
+          </ion-accordion-group>
+        </div>
       </div>
     </main>
   </body>