Всплывающее окно ng-bootstrap увеличивает ширину страницы
У меня есть кнопка в правом верхнем углу страницы. Мне нужно показать всплывающее окно, но когда я увеличиваю ширину его содержимого, страница становится больше и перемещается вправо, а внизу страницы появляется полоса прокрутки. Поэтому мне нужно сделать левую сторону всплывающего окна больше, чем правую, со смещением треугольника вправо. Но не знаю, возможно ли...
Вот соответствующие части кода:
привет.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: Пример
Ответы 2
Вы можете использовать bottom-rightразмещение, чтобы убедиться, что правая сторона всплывающего окна выровнена с правой стороной кнопки, и что всплывающее окно не увеличивает ширину содержимого страницы:
<button ... ngbPopover = "Nice class!" placement = "bottom-right">
Popover
</button>
См. этот стекблиц для демонстрации.
Прежде всего, я предлагаю вам работать с 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;
}