PopupMenu position issue inside table template

[StevenB]

Hi,

I would like to place a button with popup menu next to the global search input of a table:

Code: Select all

<div class="card">
    <p-table #customertable styleClass="p-datatable-users p-datatable-gridlines p-datatable-striped p-datatable-sm">
		<ng-template pTemplate="caption">
			<div class="p-d-flex p-jc-between">
			<!-- <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header"> -->                
				<div>
					Users
				</div>                                                  
				<div>
					<p-menu #menu [popup]="true" [model]="userMenuItems" [style]="{'width':'250px'}"></p-menu>
					<button type="button" pButton icon="pi pi-chevron-down" class="p-mr-2" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
				
					<span class="p-input-icon-left">                        
						<i class="pi pi-search"></i>
						<input pInputText type="text" (input)="customertable.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
					</span>    
				</div>                    
			</div>
		</ng-template>
	</p-table>
</div>

However, the menu pops up at the wrong position:



When I place the button outside the table the popup position is as expected below the button.

How can I achieve this inside the table "caption" template?

Thanks in advance

[StevenB]

I still haven't solved it. Maybe someone here has an idea?
Thanks in advance

[PhilHuhn]

Hey:
Like other controls they use the appendTo option to define the location. Per the documentation:

appendTo:
Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).

Example:

Code: Select all

<div #myDiv></div>
<p-menu #menu [popup]="true" [model]="items" [appendTo]="mydiv"></p-menu>

Even the above can be challenging, I was trying to get a calendar control fully visible in a dialog edit window. Good luck.

[StevenB]

This solved my issue. Thanks a lot!