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  {}

привет.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

Прежде всего, я предлагаю вам поработать с inspectElement и использовать другие единицы измерения, кроме px.Например,%, vh & vw (оба используются для ответственных окон)

Далее на вашей работе с 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;
}

Answer 2

Вы можете использовать bottom-right размещение , чтобы убедиться, что правая сторона всплывающего окна выровнена по правой стороне кнопки и что всплывающее окно не увеличивает ширину содержимого страницы:

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

См. этот стек для демонстрации.