angular / angular/components

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

オープン
#17,567 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/overlay P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 positioning が viewport のマージンをどのように処理するかを追跡し、両方のボタンで修正を検証して、それぞれの場合に最大高さ 300px が守られることを確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。