3

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. enter image description here

Luis
  • 2,006
  • 5
  • 31
  • 47
  • 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](http://plnkr.co/edit/Qi2Nw2imLpDUF8NJinYw?p=preview) – BillF Jul 22 '17 at 05:11

1 Answers1

17

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

<p-contextMenu #cm [model]="items" appendTo="body" ></p-contextMenu>
Muhammad Arslan
  • 442
  • 1
  • 9
  • 25