MOBILE-3814 collapsible: Fix height errors

src/core/directives/collapsible-item.ts

@@ -59,6 +59,10 @@ export class CoreCollapsibleItemDirective implements OnInit {
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
+        if (this.height === null) {
+            return;
+        }
+
         if (typeof this.height === 'string') {
             this.maxHeight = this.height === ''
                 ? defaultMaxHeight
@@ -141,7 +145,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
         this.element.classList.toggle('collapsible-enabled', enable);
 
         if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) {
-            this.setMaxHeight(!enable || this.expanded? undefined : this.maxHeight);
+            this.setHeight(!enable || this.expanded ? undefined : this.maxHeight);
 
             return;
         }
@@ -168,15 +172,15 @@ export class CoreCollapsibleItemDirective implements OnInit {
     /**
      * Set max height to element.
      *
-     * @param maxHeight Max height if collapsed or undefined if expanded.
+     * @param height Max height if collapsed or undefined if expanded.
      */
-    protected setMaxHeight(maxHeight?: number): void {
-        if (maxHeight) {
-            this.element.style.setProperty('--max-height', maxHeight + buttonHeight + 'px');
+    protected setHeight(height?: number): void {
+        if (height) {
+            this.element.style.setProperty('--height', height + 'px');
         } else if (this.expandedHeight) {
-            this.element.style.setProperty('--max-height', this.expandedHeight + 'px');
+            this.element.style.setProperty('--height', this.expandedHeight + 'px');
         } else {
-            this.element.style.removeProperty('--max-height');
+            this.element.style.removeProperty('--height');
 
         }
     }
@@ -192,7 +196,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
         }
         this.expanded = expand;
         this.element.classList.toggle('collapsible-collapsed', !expand);
-        this.setMaxHeight(!expand? this.maxHeight: undefined);
+        this.setHeight(!expand ? this.maxHeight: undefined);
 
         const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
         const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');

src/theme/components/collapsible-item.scss

@@ -1,12 +1,12 @@
 
 .collapsible-item {
     --display-toggle: none;
-    --max-height: none;
+    --height: none;
 
     &.collapsible-loading-height {
         display: block !important;
         height: auto !important;
-        --max-height: none !important;
+        --height: auto !important;
         --display-toggle: none !important;
     }
 
@@ -15,12 +15,12 @@
     }
 
     @include media-breakpoint-down(sm) {
-        &.collapsible-enabled {
+        &.collapsible-enabled:not(.collapsible-loading-height) {
             position: relative;
             padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
             --display-toggle: block;
-            @include core-transition(height max-height, 500ms);
-            height: calc(var(--max-height, auto));
+            @include core-transition(height max-height, 300ms);
+            height: calc(var(--height, auto) + var(--collapsible-min-button-height));
 
             .collapsible-toggle {
                 position: absolute;
@@ -62,6 +62,7 @@
             &.collapsible-collapsed {
                 overflow: hidden;
                 min-height: calc(var(--collapsible-min-button-height) + 12px);
+                height: var(--height, auto);
 
                 .collapsible-toggle-arrow {
                     transform: rotate(90deg);
@@ -69,7 +70,7 @@
 
                 &:before {
                     content: '';
-                    height: 100%;
+                    height: 60px;
                     position: absolute;
                     @include position(null, 0, 0, 0);
                     background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));

src/theme/components/format-text.scss

@@ -70,6 +70,16 @@ core-format-text {
             display: block;
         }
 
+        &.collapsible-enabled {
+            .core-format-text-content {
+                display: block;
+                max-height: none;
+            }
+            &.collapsible-collapsed .core-format-text-content {
+                overflow: hidden;
+            }
+        }
+
         @if ($core-format-text-never-shorten) {
             &.collapsible-enabled {
                 --display-toggle: none !important;
@@ -85,6 +95,12 @@ core-format-text {
             }
         }
     }
+    &.collapsible-item.inline {
+        display: inline-block;
+        &.collapsible-enabled .core-format-text-content {
+           display: inline-block;
+        }
+    }
 
     .core-adapted-img-container {
         position: relative;