我对我们的一个Angular 12应用程序有一个问题,我们在几个页面上显示弹出窗口,并且随着Chrome v115更新,它被放错了位置。为了显示弹出窗口,我们使用Popper.js和ngx-popper库。
以下是用于设置弹出窗口样式的代码(更新方法)。
<div #internal="popper" [popper]="content" [popperTrigger]="'none'" [popperPlacement]="placement"
[popperHideOnClickOutside]="popperHideOnClickOutside" [popperPositionFixed]="true" [popperTarget]="target"
[popperHideOnScroll]="popperHideOnScroll" [popperModifiers]="{preventOverflow: {boundariesElement: 'viewport'}, computeStyle: {enabled: true, fn: update.bind(this) }, flip: { enabled: allowFlip, behavior: ['left', 'bottom', 'top',
'right'], boundariesElement: 'viewport' } }" [popperAppendTo]="appendTo" (popperOnShown)="onShown($event)"
(popperOnHidden)="onHide($event)" (hideOnClickOutside)="onClickOutside($event)">
<popper-content #content class="casa-popover" [class.casa-popover-append-to]="appendTo"
[class.ml20-when-x-placement-right]="worksAsRibbonInPatientCaseSelector">
<ng-content select=".header" #header></ng-content>
<ng-scrollbar [trackX]="false" [trackY]="true" [disabled]="true">
<ng-content select="[body]"></ng-content>
</ng-scrollbar>
<ng-content select=".footer"></ng-content>
</popper-content>
</div>
字符串
有趣的是,当我在update方法上放置一个调试器时,我得到了正确的坐标,弹出窗口在正确的区域打开。下面是来自不同浏览器和版本的屏幕截图。
Chrome v115
边缘v115
Chrome v114
1条答案
按热度按时间fhity93d1#
CSS为我工作。将此类添加到popper css/scss文件中,并在所有位置添加.ngxp__容器类样式。
字符串