diff --git a/src/core/directives/fab.ts b/src/core/directives/fab.ts index 05009e894..d3d0677cb 100644 --- a/src/core/directives/fab.ts +++ b/src/core/directives/fab.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Directive, OnDestroy } from '@angular/core'; +import { Directive, ElementRef, OnDestroy } from '@angular/core'; import { IonContent } from '@ionic/angular'; /** @@ -31,8 +31,10 @@ export class CoreFabDirective implements OnDestroy { protected scrollElement?: HTMLElement; protected done = false; + protected element: HTMLElement; - constructor(protected content: IonContent) { + constructor(el: ElementRef, protected content: IonContent) { + this.element = el.nativeElement; this.asyncInit(); } @@ -43,6 +45,13 @@ export class CoreFabDirective implements OnDestroy { if (this.content) { this.scrollElement = await this.content.getScrollElement(); if (!this.done) { + // Move element to the nearest ion-content if it's not the parent + if (this.element.parentElement?.nodeName != 'ION-CONTENT') { + const ionContent = this.element.closest('ion-content'); + ionContent?.appendChild(this.element); + } + + // Add space at the bottom to let the user see the whole content. const bottom = parseInt(this.scrollElement.style.paddingBottom, 10) || 0; this.scrollElement.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px'; this.done = true; diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index cd98501fb..b4aebafba 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -292,7 +292,6 @@ core-rich-text-editor .core-rte-editor { @include core-headings(); p { - font-size: 1.4rem; margin-bottom: 1rem; } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 64d00583b..1d66e9ca3 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -761,18 +761,15 @@ textarea:not([core-auto-rows]) { height: 200px; } -ion-fab[core-fab] { - position: fixed; -} - -ion-content > ion-fab[core-fab] { - position: absolute; -} - ion-back-button.md::part(text) { display: none; } +// Hide close button because when present is read on voice over. +ion-fab[core-fab] ion-fab-button::part(close-icon) { + display: none; +} + .core-media-adapt-width { max-width: 100%; }