feature: Absolute position

[honzajde]

Bug, feature request, or proposal:

Feature

What is the expected behaviour?

Be able to (absolute) position popover. Have possibility to absolute position popover. Or move it relative to the element at least.

What is the current behaviour?

Position is bound a dom element (I agree there is functionality making use of it)

What are the steps to reproduce?

Provide a working example using StackBlitz (or similar) to reproduce the problem. StackBlitz Template: https://stackblitz.com/fork/mde-popover

What is the use-case or motivation for changing an existing behaviour?

I need to show popup for svg elements.

Which versions of Angular, Material-Extended, OS, TypeScript, browsers are affected?

Other Comments

[joejordanbrown]

@honzajde

Thanks for the feature request.

Be able to (absolute) position popover. Have possibility to absolute position popover.

This definitely would be nice to have. I would also like to add more options to positionX and positionY for centring vertically and horizontal. I would need to look into this when it goes through the refactoring stage after design document is designed. How would you like to be able to configure this option? Would it still need a target element or just using position top and left? What about when the screen size changes?

Or move it relative to the element at least.

I think this is currently possible using the offset options mdePopoverOffsetX and mdePopoverOffsetY. See the docs.

Can you provide an example of an SVG you'd want to add a popover to its elements, with an explanation of how you'd want it to function? Would help me to test that functionality with the popover.

[honzajde]

I'll give it another shot and let you know then.

[honzajde]

I did some more experiments. I did try to define popover on a containing div of my svg and also on a div inside the div but that seemed not to be doing what I would expect. It works as expected on a button though. That could have solve together with mdePopoverOffset my problem. BTW. is there any starting point plunkr out there?

[joejordanbrown]

@honzajde

Thanks for getting back to me on this issue.

I would be interested to investigate the problems with using it on an SVG. I do have a plunker here but i would prefer if you used StackBlitz here is one that I've setup.

If you fork that StackBlitz template and add an SVG example and share the link I will look into seeing what's wrong.

[kamok]

I am unsure if I should start a new feature request, or add it here. But I need to trigger the menu to open at precisely where my mouse clicks it, not in relation to where the component was clicked.

Is there a way to do it with the current api? I looked at it but I couldn't figure it out.

[joejordanbrown]

@kamok

I think this feature would fit your criteria

That's not possible with the current API. It would be a nice to have feature. This type of popover would need to have its own component that doesn't use the for target. I will look into this when I find some time to refactor this project.

At the moment you could have an invisible 1px by 1px element that you use for the target element and position that element where the mouse is on the event trigger. The popover should then be positioned wherever that target element is.

[kamok]

@joejordanbrown Thanks, I've also thought about doing having a layer of an invisible component to anchor the popover and have it follow the cursor. I've since switched to a static location to trigger the popover to avoid all that code for what is a small change in UX.

[joejordanbrown]

@kamok

Here is an example I've just made https://stackblitz.com/edit/mde-popover-dynamic-target-position

[kamok]

@joejordanbrown I figured it out. Putting this ref into the plunkr works:

export class AppComponent  {
  @ViewChild(MdePopoverTrigger) target: MdePopoverTrigger;
  @ViewChild("target") targetRef: ElementRef;

  showTarget(event) {
    this.target.closePopover();
    this.targetRef.nativeElement.style.top = event.clientY + 'px';
    this.targetRef.nativeElement.style.left = event.clientX + 'px';
    this.target.openPopover();
  }
}

[joejordanbrown]

@kamok

If the problem was relating to _element with it being private. I think it works on the StackBlitz demo fine but if I remember right the angular compiler now treats private differently than when I made this. I will fix that since that is a bug and should now be public. You then won't have to have two @ViewChild, look out for a new release soon. I'll fix it now.

[joejordanbrown]

@kamok

Updated, renamed to _elementRef and it is now public.

See StackBlitz Demo.

[behuda]

@joejordanbrown the above works, but when mouse is clicked outside of div it doesn't closes the popover.

/** Only subscribe to backdrop if trigger event is click */
            if (this.triggerEvent === 'click' && this.backdropCloseOnClick === true) {
              this._subscribeToBackdrop();
            }

this.triggerEvent === 'click' is none

[gcherem]

@joejordanbrown, is there a way to show the arrow in the example https://stackblitz.com/edit/mde-popover-dynamic-target-position ?

[joejordanbrown]

@gcherem

Sorry I missed your reply.

Check out this example https://stackblitz.com/edit/mde-popover-dynamic-target-position-arrow-offset?file=app/app.component.html

You can use these options [mdePopoverOverlapTrigger]="false" mdePopoverOffsetX="-19" mdePopoverOffsetY="-1 for adding the arrow and offsetting it to where you mouse cursor clicks. If you need to change the arrow colour use mdePopoverArrowColor="white"

There is a bug with the offset that's I was recently made aware of, you can see the issue when you try to click the right side of the example.

[sushant-coditas]

Is there a way I can currently achieve absolute positioning ? @joejordanbrown