在 Ionic 6 / Capacitor 中打开模态时，MarginBottom 不适用于 Fabbutton答案

【问题标题】：MarginBottom doesn't apply with the Fabbutton when opening a modal in Ionic 6 / Capacitor在 Ionic 6 / Capacitor 中打开模态时，MarginBottom 不适用于 Fabbutton
【发布时间】：2022-09-24 06:17:17
【问题描述】：

在我的 android 应用程序中实施此解决方案后，我遇到了另一个问题。

How to use different admob methods in Ionic 6/Capacitor?

当我从一个页面切换到另一个页面时，解决方案有效，但当我打开模式时无效。我有一个名为 fabbuton 的组件，这就是代码。

Fabbutton.html

<div class=\"fixed\">
  <ion-fab (click)=\"scrollToTop()\" vertical=\"bottom\" horizontal=\"end\" edge slot=\"fixed\">
    <ion-fab-button class=\"toolbar-color\" size=\"small\">
      <ion-icon name=\"arrow-up\"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</div>

Fabbutton.css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

Fabutton.ts

import { Component, EventEmitter, Output } from \'@angular/core\';

@Component({
  selector: \'app-fabbutton\',
  templateUrl: \'./fabbutton.component.html\',
  styleUrls: [\'./fabbutton.component.scss\'],
})
export class FabbuttonComponent {
  
  @Output(\'onClick\') onClick = new EventEmitter<any>();

  scrollToTop() {
   this.onClick.emit();
  }
}

这是我的 admob 服务代码：

import { Injectable } from \'@angular/core\';
import { Platform } from \'@ionic/angular\';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents } from \'@capacitor-community/admob\';

@Injectable({
    providedIn: \'root\'
})
export class AdMobService {

    private appMargin: number = 0;

    constructor(private platform: Platform) {
        this.init();
    }

    async init() {

        await this.platform.ready();
        await AdMob.initialize({
            requestTrackingAuthorization: true,
            initializeForTesting: true,
        }).catch(err => console.error(\'Could not init Admob\', err));

        AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info: any) => {
            // Subscribe Change Banner Size
            this.appMargin = parseInt(info.height, 10);
            if (this.appMargin > 0) {
                const app: HTMLElement = document.querySelector(\'ion-router-outlet\');
                app.style.marginBottom = this.appMargin + \'px\';
            }
        });
    }

    async bannerAd(admobId: string) {
        const options: BannerAdOptions = {
            adId: admobId,
            adSize: BannerAdSize.FULL_BANNER,
            position: BannerAdPosition.BOTTOM_CENTER,
            margin: 0,
            isTesting: true,
            npa: true
        };

        await AdMob.showBanner(options).catch(err => console.error(\'Could not init Admob banner\', err));
    }
}

因此，当添加出现时，fabbuton 会像这样上升一点：

当我打开一个模态fabbutton 组件位于 add 后面，如下所示：

在每个页面中它都运行良好，但仅在模态页面中它不添加边距底部。

我试图用 !important 标签否决 CSS，但仍然没有运气。

我怎样才能像其他页面一样在模式中拥有marginbottom？

抱歉，这里的长期引导用户，当您说模态时，您不是指对话框吗？固定位置不应相对于广告发生变化，除非您使用脚本或 css 更改固定位置。您可以更改相对于广告的固定位置，或者您可以让按钮成为广告元素的一部分（或同时包含两者的 en 元素）并设置绝对位置 ex top: -30px，这样它将始终位于广告上方。
你好@Patrick，谢谢你的时间。广告的一部分是什么意思？因为我使用打字稿来显示 fab 按钮的广告和 HTML。你有例子吗？

标签： javascript html css angular ionic-framework

【解决方案1】：

尝试使用 css 属性 --margin-bottom 代替。

【讨论】：

你好！谢谢你的时间。当我使用 margin-bottom 时，fabbutton 消失了..