ng-bootstrap popover 增加页面宽度

Question

我在页面的右上角有一个按钮。我需要显示一个弹出窗口，但是当我增加其内容的宽度时，页面变大并向右移动，滚动条出现在页面底部。所以我需要使弹出窗口的左侧大于右侧，三角形向右偏移。但是不知道可不可以...

以下是代码的相关部分：

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styles: [`
    div {
      display: flex;
    }
    button {
      margin-left: auto;
    }
    .my-custom-class {
      width: 400px;
      background: aliceblue;
      font-size: 125%;
    }
    .my-custom-class .arrow::after {
      border-top-color: aliceblue;
    }
  `]
})
export class HelloComponent  {}

hello.component.html

<div>
    <button type="button" class="btn btn-outline-secondary" ngbPopover="Nice class!"
      popoverClass="my-custom-class" placement="bottom">
      Popover
    </button>
</div>

我还在 stackblitz 上提供了一个工作示例：Example

Answer 1

您可以使用 bottom-right placement 来确保弹出框的右侧与按钮的右侧对齐，并且弹出框不会增加页面内容宽度：

<button ... ngbPopover="Nice class!" placement="bottom-right">
  Popover
</button>

有关演示，请参阅 this stackblitz。

Answer 2

首先，我建议您使用 inspectElement 并使用除 px 之外的其他测量单位。例如 % , vh & vw (均用于负责 windows)

接下来在您的 css 样式中使用 .my-custom-class

  .my-custom-class {
  width: 400px; //better change this to width:50% or 50 vw
  background: aliceblue;
  font-size: 125%;
  //also add these lines 
  left: 28px !important; //this is changeable to left:5% 
  position:absolute;
}

ng-bootstrap popover 增加页面宽度

ng-bootstrap popover increases page width

angular

typescript

popover

ng-bootstrap

angular-bootstrap