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（均用于负责的窗口）

接下来使用.my-custom-class 进行CSS样式设计

  .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增加页面宽度

2 个答案: