Ngx-Bootstrap 弹出框未设置正确的高度或宽度答案

【问题标题】：Ngx-Bootstrap popover not setting correct height or widthNgx-Bootstrap 弹出框未设置正确的高度或宽度
【发布时间】：2017-12-15 22:41:58
【问题描述】：

我试图在我的 Ionic 2 / Angular 2 应用程序中使用 ngx-bootstrap，但由于某种原因，弹出框在我的视图中没有正确显示：

<button
  placement="right"
  [outsideClick]="true"
  popover="this is a teseofnwifo ef efo efoih wefohwefo wef  h ioef  whefhweofihwoeht"
  [isOpen]="true"
  triggers="click"

  ion-button full outline 
  class="flex-col rounded box-shadow" 
  color="primary" 
  style="height:100%;font-size:16px;border-width:1px;" 
  (click)="goTo('new-client')" #1>
  <i class="fa fa-user-plus text-shadow" padding style="font-size: 150px;color:red;"></i>
  <span style="font-size:32px;text-transform:none;">New Client</span>
</button>

我认为我的按钮样式不会影响弹出框，因为它呈现为单独的组件，但是当显示弹出框时，其 width 和 height 都设置为 4px。我不确定它是在哪里设置的，或者我是否在某处遗漏了一些 javascript..

app.module.ts

import { PopoverModule } from 'ngx-bootstrap/popover';

@NgModule({
  declarations: [...],
  imports: [
    PopoverModule.forRoot()
  ]
  ...
})

【问题讨论】：

你试过使用 Tooltip 吗？
工具提示间距有效，但我需要一个弹出框

标签： twitter-bootstrap angular ionic-framework bootstrap-4 ngx-bootstrap

【解决方案1】：

我正在使用 Angular 9。我唯一的方法是使用 ng-deep 强制全局更改它

::ng-deep popover-container {
    max-width: 100% !important;
    background-color: black !important;
    color: white !important;
}

::ng-deep .bs-popover-bottom>.arrow::after {
    border-bottom-color: black !important;
}

【讨论】：

【解决方案2】：

设置 container="body"，如演示：https://valor-software.com/ngx-bootstrap/#/popover#container-body

如果它会固定大小，那么某些东西会影响弹出框样式

【讨论】：

即使添加了container，我仍然遇到同样的问题
那么需要stackblitz样本