angular / angular/components

Define a bounding box for overlay other than documentElement

Open
#15,894 4 comments 8 reactions 0 assignees View on GitHub
area: cdk/overlay feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Please describe the feature you would like to request.
I would like the ability to define a bounding area where the tooltip is constrained to. Currently, the overlay bounding box is set to top: 0px; left: 0px; height: 100%; width: 100% but I would like to define these programmatically or pass an element ref to use as a template for the bounding box calculation. I know I can add a class to the overlay to change this but it has to be dynamic and respond to resizing an element whose size represents what the overlay bounds should be.

#### What is the use-case or motivation for this proposal?
The app has a requirement to restrict the tooltip location over a certain area and not allow it to overflow over surrounding elements. For example, using a tooltip to provide more detail over a chart cursor but the tooltip should be constrained to just the chart area.

This isn't the exact scenario but you can see the tooltip overflows the mat-card area here. I want to be able to push the tooltip into the mat-card area.
https://stackblitz.com/edit/angular6-material-components-demo-overlay-container

#### Is there anything else we should know?
Angular 7.2.4
Material 7.2.1

In FlexibleConnectedPositionStrategy, perhaps there could be an optional sizingEl property to use other than the documentElement. I haven't been able to test this since it's not extendable.

```
withSizingElement(sizingElement: HTMLElement): this {
this._sizingEl = sizingElement;
return this;
}

private _getNarrowedViewportRect(): ClientRect {
const el = this._sizingEl || this._document.documentElement;
const width = el!.clientWidth;
const height = el!.clientHeight;
...
}
```
Something similar will have to be done to get the top and left from the sizing element:
```
getScrollPosition(referenceElement?: HTMLElement): ScrollPosition {
if (!this._platform.isBrowser) {
return {top: 0, left: 0};
}

const el = referenceElement || document.documentElement!;
const rect = el.getBoundingClientRect();
const top = -rect.top || el.scrollTop || 0;
const left = -rect.left || el.scrollLeft || 0;

return {top, left};
}
```

Contributor guide

Open the contributing guide

Research direction

Start by reading FlexibleConnectedPositionStrategy, especially _getNarrowedViewportRect and getScrollPosition, to understand how the current documentElement bounds are calculated. Define the behavior for a supplied sizing element, including its position and resizing, and verify that tooltips remain constrained to the requested chart or mat-card area.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.