maikeruit / simple-context-angular2

Simple context menu to Angular 2
0 stars 0 forks source link

How to position context-menu #1

Open sametsafak opened 7 years ago

sametsafak commented 7 years ago

If I have a div which has got css position: relative; top: 100px; left: 100px; and if context-menu has to open inside of this div, what should I do?

Now menu is opening 100px right and 100px bottom of my click position.

Fixed (temporary of course)

I fixed this problem with this tiny code

On html (added contextmenu function call)

<ul>
    <li *ngFor="let group of groups"
        (contextmenu)="onRightClick($event)"
        [simple-context]="simpleContext"
        [simple-context-payload]="group">
        {{group.title}}
    </li>
</ul>

On component's ts file (change the relative-element classwhatever you want)

onRightClick (e) {
    let rect = document.getElementsByClassName('relative-element')[0].getBoundingClientRect();
    // console.log(rect.top, rect.right, rect.bottom, rect.left);

    let contextMenu = document.getElementsByClassName('context')[0]  as HTMLElement;
    let contextMenuLeft = Number(contextMenu.style['left'].replace('px', ''));
    let contextMenuTop = Number(contextMenu.style['top'].replace('px', ''));

    contextMenu.style['top'] = (contextMenuTop - rect.top) + 'px';
    contextMenu.style['left'] = (contextMenuLeft - rect.left) + 'px';
}
maikeruit commented 7 years ago

@sametsafak Thanks. Please add pull request