Primeng (Angular 4): The ContextMenu appears in another position

Question

I have the next code:

<p-dataTable [contextMenu]="cm" [value]="Usuarios" selectionMode="single" [(selection)]="selectedRecord" resizableColumns="true" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" scrollable="true" scrollWidth="100%">
        <p-column [sortable]="true" field="id" header="ID" [style]="{'width':'50px'}"></p-column>
        <p-column [sortable]="true" field="dni" header="DNI" [style]="{'width':'80px'}"></p-column>
        <p-column [sortable]="true" field="ap_paterno" header="Apellido Paterno" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="ap_materno" header="Apellido Materno" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="nombres" header="Nombres" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="fecnac" header="Fecha de Nac" [style]="{'width':'150px'}"></p-column>
        <p-column [sortable]="true" field="est_civil" header="Estado Civil" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="fec_ingreso" header="Fecha de Ingreso" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="movil" header="Movil" [style]="{'width':'100px'}"></p-column>
        <p-column [sortable]="true" field="fijo" header="Fijo" [style]="{'width':'90px'}"></p-column>
        <p-column [sortable]="true" field="direccion" header="Dirección" [style]="{'width':'180px'}"></p-column>
        <p-column [sortable]="true" field="distrito" header="Distrito" [style]="{'width':'200px'}"></p-column>
        <p-column [sortable]="true" field="email_corp" header="Email corporativo" [style]="{'width':'180px'}"></p-column>
        <p-column [sortable]="true" field="email_per" header="Email personal" [style]="{'width':'180px'}"></p-column>
        <p-column [sortable]="true" field="login" header="Login" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="contacto_emergencia" header="Contacto de emergencia" [style]="{'width':'180px'}"></p-column>
        <p-column [sortable]="true" field="telef_contacto" header="Teléfono de Contacto" [style]="{'width':'100px'}"></p-column>
        <p-column [sortable]="true" field="perfil" header="Perfil" [style]="{'width':'120px'}"></p-column>
        <p-column [sortable]="true" field="turno" header="Turno" [style]="{'width':'120px'}"></p-column>
</p-dataTable>
<p-contextMenu #cm [model]="items"></p-contextMenu>

And I have the next issue: When I select a record, this is highlighted as selected, but its contextual menu appears far away.

Narration

Just looking at the showcase for contextMenu, have you looked at using the target property of the contextMenu? That allows you to assign a template var as the "anchor" of the contextMenu. That might help. Another thing that might help isolate whether it is something you have done, vs something that is wrong with the component, is use a plunkr to test out your code. link – Gilreath

Answer 1

You need to add appendTo="body" to p-contextMenu like this

<p-contextMenu #cm [model]="items" appendTo="body" ></p-contextMenu>

Rayford