Большое всплывающее окно материала Angular должно сделать родительский контент прокручиваемым.
У меня есть всплывающее окно в моем проекте с некоторыми флажками, перечисленными ниже других.
Прямо сейчас все работает нормально, но когда разрешение экрана маленькое, содержимое обрезается внизу, а родительский контейнер не прокручивается, это происходит только с CdkOverlay, поскольку он, похоже, не влияет на родительский контент, когда отображается всплывающее окно, вы можете увидеть рабочий пример на этом stackblitz
Я не могу поделиться своим основным кодом, но это то, что я пробовал на stackblitz, и это очень похоже на мой проект:
<div
cdkScrollable
style = "height: 100px; overflow-y: auto; border: 1px solid green">
<button
(click) = "isOpen = !isOpen"
cdkOverlayOrigin
#trigger = "cdkOverlayOrigin">Show</button>
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOrigin] = "trigger"
[cdkConnectedOverlayOpen] = "isOpen">
Popover content
</ng-template>
</div>
Как вы можете видеть по ссылке, родитель не получит прокрутку, когда всплывающее окно открыто, как я могу этого добиться?
Ответы 1
CDK-оверлей прикреплен вне приложения
Если единственное, что вам нужно, это изменить «родителя», вы можете сделать это в событии (прикрепить)
<!--see the template reference variable "anchor"
and the style = "position:relative"-->
<div #anchor
style = "position:relative;
height: 100px;
overflow-y: auto;
border: 1px solid green ">
<button (click) = "isOpen = !isOpen" cdkOverlayOrigin #trigger = "cdkOverlayOrigin">
Show
</button>
<!--in attach event you pass the "anchor"-->
<ng-template #template
cdkConnectedOverlay
(attach) = "changeParent(anchor)"
...
>
...
</ng-template>
ChangeParent это просто:
//in constructor inject the Overlay service
constructor(private overlay: Overlay) { }
changeParent(el:any)
{
//get the "cdk-panel
const container=(this.overlay as any)
._overlayContainer.getContainerElement()
//it's necessary change the position to "absolute"
container.style.position='absolute'
//and take account the position of the div
const rect=el.getBoundingClientRect()
container.style['margin-top']=-rect.top+'px'
container.style['margin-left']=-rect.left+'px'
//change the parent using appendChild
el.appendChild(container);
}
Стекблиц
@DJG22 DJG22, боюсь, нужно немного подкорректировать. Если div находится в "верху" работает, а если нет, то нужно настроить положение. Я работаю над этим и обновляю свой ответ, когда получаю его
@ DJG22, просто сделай это :). ПРИМЕЧАНИЕ. Вы можете использовать el.style.position = "relative", если вы не пишете в .html или не используете .css.
Он отлично работает с исходным решением, исходный HTML не похож на stackblitz, это был просто образец, так как я не могу поделиться исходным кодом.
@ DJG22 DJG22, в stackblitz я обновил его, добавив «position.relative» и приняв во внимание позицию. Мои комментарии об этом.
Извините за награду, я только что присудил вам очки, спасибо за это, вы мне очень помогли!
Да! это именно то, что мне было нужно, хотя для этого требуется указать относительную позицию родительского компонента, это не имеет большого значения, спасибо.