angular / angular/components

Setting maxHeight on overlay with flexibleConnectedTo strategy does not work, when viewport margin is also configured

未关闭
#17,567 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/overlay P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Reproduction

Steps to reproduce:
1. Visit the [stackblitz](https://stackblitz.com/edit/understanding-overlay-03-viewport-margin-bug)
2. Click the 2 buttons


#### Expected Behavior

That the max height of 300px is respected in both cases

#### Actual Behavior

Max height is only respected, if `withViewportMargin(10)` is not configured.

#### Environment

- Angular: 8.2.13
- CDK/Material: 8.2.3
- Browser(s): `Version 78.0.3904.70 (Official Build) (64-bit)`
- Operating System (e.g. Windows, macOS, Ubuntu): `macOS Mojave`

#### Gif

![bug-2](https://user-images.githubusercontent.com/9967422/68024963-e1d5c080-fcab-11e9-8f39-c4a25de26309.gif)

#### Relevant code

```typescript
const overlayRef = this.overlay.create({
hasBackdrop: true,
positionStrategy: this.overlay.position().flexibleConnectedTo(element)

// The max height is only respected, if the viewport margin is left out
.withViewportMargin(10) // <------

.withPositions([
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
},
]),
width: '200px',
maxHeight: '300px',
});
```

贡献指南

打开贡献指南

调研方向

从链接的 StackBlitz 复现和使用 flexibleConnectedTo、withViewportMargin(10) 以及 maxHeight 的 overlay.create 示例开始。跟踪 flexible connected 定位如何处理 viewport 边距,并使用两个按钮验证修复,确保在每种情况下都遵守 300px 的最大高度限制。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。