popup menu offset fixed ?

[maipucino]

I saw in Blog that https://github.com/primefaces/primeng/pull/1855 is fixed in RC2, despite it remains open.

I changed rc1 to rc2 in ultima-ng-2.0.0 and think I still have that issue. Popup menus in datatable rows "popups" in weird places, usually several rows below. It is that issue, right ?

Should I do anything else to upgrade ultima to rc2 besides changing package.json and npm install ?

Regards,
Diego.

[DarthMaul]

Hi,

Just upgrading and installing should be enough is that bug still consisting?

[maipucino]

I changed package.json to rc.2, npm install, ng serve and the issue was still there.

Next, I removed node_modules and started again, with same results. Poup menu shows up 5 rows below.

Regards,
Diego.

[maipucino]

I tried with a fresh ultima-ng-2.0.0 instance, just unzipped from distriibution file and added a component with a datatable and a popup menu linked to each row. (code below).

Popup menu opens several rows below the clicked row. If side menu is opened, popup is even outiside the screen at right. I can't add a screenshot image now.

Image is posted in https://postimg.org/image/5blubgggz Please remember I clicked on first row.

component view is :

Code: Select all

<div class="ui-g">
    <div class="ui-g-12">
        <div class="card card-w-title">
            <h1>DataTable</h1>
            <p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" 
                [paginator]="true" [rows]="10" [responsive]="true">
                <p-header>List of Cars</p-header>
                <p-column field="vin" header="Vin" [sortable]="true"></p-column>
                <p-column field="year" header="Year" [sortable]="true"></p-column>
                <p-column field="brand" header="Brand" [sortable]="true"></p-column>
                <p-column field="color" header="Color" [sortable]="true"></p-column>
                <p-column styleClass="col-button" header="Actions">
		            <template let-col="rowData" pTemplate="body">
			            <p-menu #actions popup="popup" [model]="actionItems"></p-menu>
			            <button pButton icon="ui-icon-settings" type="button"
                   (click)="actions.toggle($event)">
				        </button>
		            </template>
	            </p-column>
            </p-dataTable>
        </div>
    </div>
</div>

and controller is:

Code: Select all

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MenuItem } from 'primeng/primeng';

@Component({
  selector: 'app-popop-issue',
  templateUrl: './popop-issue.component.html',
  styleUrls: ['./popop-issue.component.scss']
})
export class PopopIssueComponent implements OnInit {

  selectedCar: any;
  actionItems: any[];
  cars: any[];

  constructor() { }

  ngOnInit() {

    this.cars = [
      { "brand": "VW", "year": 2012, "color": "White", "vin": "dsad231ff" },
      { "brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345" },
      { "brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr" },
      { "brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh" },
      { "brand": "Mercedes", "year": 1995, "color": "White", "vin": "hrtwy34" },
      { "brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj" },
      { "brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr" },
      { "brand": "Jaguar", "year": 2013, "color": "White", "vin": "greg34" },
      { "brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5" },
      { "brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s" }
    ];

    this.actionItems = [
      { label: 'Stats', icon: 'ui-icon-insert-chart' },
      { label: 'Calendar', icon: 'ui-icon-date-range' },
      { label: 'Documentation', icon: 'ui-icon-book' },
      { label: 'Support', icon: 'ui-icon-help-outline' },
      { label: 'Social', icon: 'ui-icon-public' }
    ];

  }

}

I am doing something wrong ?

Regards,
Diego.

[DarthMaul]

I will review your code and get back to you.

[maipucino]

Any news about this ?.

Regards,
Diego.

[maipucino]

Nothing yet ?

Regards,
Diego.

[DarthMaul]

Sorry for the latency i'll get back to you in 24 hours.

[maipucino]

Thanks!

Regards,
Diego.

[DarthMaul]

Hi Diego,

Could you please add appendTo="body" to your p-menu

Code: Select all

<p-column styleClass="col-button" header="Actions">       
          <template let-col="rowData" pTemplate="body">
          <p-menu #actions popup="popup" appendTo="body" [model]="actionItems"></p-menu>
          <button pButton icon="ui-icon-settings" type="button"
          (click)="actions.toggle($event)">
         </button>
         </template>
</p-column>