[WIP][P2][Sourcing]Angular CDK Positioning

[spprasad137]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Creating this issue because #11090 was not addressed. Expectation: The column containing link should be at the end of the Table, partially visible such that the link is clickable from the Table Cell, then the popover should be automatically placed such that its borders are visible fully without breaking the borders and content should not shrink.

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

Angular 15, Core Platform 0.43.26

If this is a bug, please provide steps for reproducing it; the exact components you are using;

1) The column containing link should be at the end of the Table, Partially Visible 2) Link Should be clickable from the table Cell 3) popover should be adjusted with screen size without shrink the content and all borders of the popover should be visible.

NOTE:- Popover should be automatically placed such that its borders are visible fully without breaking the borders.

Attaching the Screen recording of Issue reproducible . Please refer the video for reproduce the issue.

https://github.com/SAP/fundamental-ngx/assets/153801405/716d9fd0-bcbf-470c-9be2-4f1ee5165f52

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

https://stackblitz.com/edit/angular-9qxxca-ztrg9q?file=src%2Fapp%2Fplatform-table-preserved-state-example.component.html,src%2Fapp%2Fplatform-table-preserved-state-example.component.ts,package.json

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

[mikerodonnell89]

If the developer anticipates the user having a screen that's so narrow that it can't contain the popover contents, I think this is more of a design problem and not something the library itself can handle. I'd advise opening a full screen mobile dialog instead. Perhaps the application can detect available screen space and use conditional templates - popover for wide screens, dialog for narrow.

[spprasad137]

Hi @mikerodonnell89 , It's on full screen itself, issue comes up only when hyperlink is at the edge of the browser window so shall we connect over the call and discuss ?

[mikerodonnell89]

So I think the problem is better demonstrated with some different popover dimensions, I've reduced the width of the popover body in these examples.

In the screenshot below, the table is scrolled to the end such that the popover control (link) is fully visible. The popover is positioned correctly when opened

The problem arises when the popover control link is slightly out of view, but still clickable. The popover body renders in the same place relative to its control, but because the control is slightly out of view, so is the popover body:

Using placement="left-start" helps alleviate this specific issue. But I believe this positioning should be applied automatically in this case

Here's the example code https://stackblitz.com/edit/angular-9qxxca-gply3f?file=src%2Fapp%2Fplatform-table-preserved-state-example.component.html

[spprasad137]

Hi @mikerodonnell89 ,

I Agree that Using placement="left-start" helps to alleviate this issue when the popover control link is right end corner and slightly out of view, but still clickable.

But Still the problem arises when the popover control link is at the left end corner and slightly out of view, but still clickable. The popover body renders in the same place relative to its control, but because the control is slightly out of view, so is the popover body:

Example Code - https://stackblitz.com/edit/angular-9qxxca-784sga?file=src%2Fapp%2Fplatform-table-preserved-state-example.component.html

Please advise fix for both situation, no matter either left End corner or Right End Corner, Popover body should render completely visible.

[mikerodonnell89]

Please advise fix for both situation, no matter either left End corner or Right End Corner, Popover body should render completely visible.

If the popover control is on the far left, you can use placement="left-start". You can also use data binding (i.e. [placement]="someFunction()") where someFunction() returns one of the placement types, depending on the need for the situation

[spprasad137]

Hi @mikerodonnell89 ,

To make data binding or placement="left-start"/"right-start", It's not possible to get the which position popover control link present. When the User starts scrolling to left end or Right end its difficult to get the position.

[droshev]

CDK scrollable research which might help

[mikerodonnell89]

@spprasad137 have you tried using the Angular CDK placement options? https://ng-15-downport--fundamental-ngx.netlify.app/#/core/popover#cdk-placement

Note that the applyNewPosition function accepts an array of ConnectionPositionPair objects. The order of this array is the priority order of what the popover will try to place in the view.

In this example using Angular CDK, you can see the same issue you're seeing in fundamental-ngx:

however if I change the placement option array to this:

    const positions: ConnectionPositionPair[] = [
      // top center
      {
        overlayX: 'center',
        overlayY: 'bottom',
        originX: 'center',
        originY: 'top',
        panelClass: ['bottom', 'center'],
        offsetY: -1 * panelOffset,
      },
      {
        overlayX: 'end',
        overlayY: 'top',
        originX: 'start',
        originY: 'top',
      },
    ];

cdk will try the first option, it doesn't fit, so it uses the 2nd.

Here is a stackblitz i found demonstrating this https://stackblitz.com/edit/cdk-popover-example-p1-uavbte?file=src%2Fapp%2Fpopover%2Fpopover.service.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

[spprasad137]

Hi @mikerodonnell89 ,

As discussed over the call, Popover alignment should be dynamic in such a way that it should render completely visible where more space available on the Page.

As showed, using above CDK placement options still it doesn't solve our Problem. To positioning the popover either left or right we are not sure In which place user keeps the hyperlink text.

Solution/Expectation is Popover should render completely visible and Popover should be automatically placed such that its borders/contents are visible fully without breaking. PopOver should render completely visible no matter where user keeps the place of popover control link (At the left end corner or Right end corner)

[mikerodonnell89]

As showed, using above CDK placement options still it doesn't solve our Problem.

Right, the example posted above addresses the situation for the button on the right side of the window, not every popover on the page, for other possibilities you will need to add more ConnectionPositionPair objects to the array.

[mikerodonnell89]

https://github.com/angular/components/issues/17585 possibly related

[mikerodonnell89]

we are going to stick with our current offering, and leave it to the application developer to add more positions if they want, whether through the [cdkPositions] or [placement] options. Also in this specific instance, we do think a dialog may be a better UX option