Dropdown rendering below table, Old issue reference #193

[GopiAnnan]

#193 : Dropdown rendering below table

Dropdown overflow is hidden. fix mentioned in #193 is not exists and its not working.

After fixing in PrimeUi.css
From
/* Scrollable */
.ui-datatable-scrollable-body {
overflow:auto;
}

to

/* Scrollable */
.ui-datatable-scrollable-body {
overflow:visible;
}

overflow is working.

[Nattujessy]

In addition to the above css changes the Datatable scroll bar is not working.
The same scenario applicable for autocomplete component inside datatable component as well.
Any fixes ?

[johnvcoleman]

I'm having the same issue where the p-dropdown is not rendering outside the current row. I have updated to PrimeNG 1.1.4, and the problem persists.

Using @cagataycivici example in #1600 (adding style="overflow:visible") to the p-column results in an error, probably because his fix is for a scrollable table. I am not using a scrollable table.

<p-column field="RoleName" header="User Role" style="overflow:visible"> <template let-col let-user="rowData" pTemplate="editor"> <p-dropdown [(ngModel)]="user[col.field]" [options]="roles" [style]="{'width':'100%'}"></p-dropdown> </template> </p-column>

When I apply the overflow:visible attribute, I get this error:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Error in ./DataTable class DataTable - inline template:13:48 caused by: Cannot find a differ supporting object 'overflow:visible'
Error: Cannot find a differ supporting object 'overflow:visible'
at KeyValueDiffers.find (http://localhost:4200/vendor.bundle.js:43636:19)
at NgStyle.set [as ngStyle] (http://localhost:4200/vendor.bundle.js:53900:46)
at Wrapper_NgStyle.check_ngStyle (/CommonModule/NgStyle/wrapper.ngfactory.js:18:26)
at View_DataTable5.detectChangesInternal (/DataTableModule/DataTable/component.ngfactory.js:795:21)
at View_DataTable5.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:61777:14)
at View_DataTable5.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:61870:44)
at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:61962:37)
at View_DataTable4.detectChangesInternal (/DataTableModule/DataTable/component.ngfactory.js:610:14)
at View_DataTable4.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:61777:14)
at View_DataTable4.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:61870:44)
ErrorHandler.handleError @ error_handler.js:47

Is there a known fix for this on non-scrollable datatable? I can create a new issue if needed. Thanks!

[johnvcoleman]

I sorted this out. You have to add square brackets around the style attribute and make sure the css directives are single quoted like so:

[style]="{'overflow':'visible'}"

Otherwise, the "fix" doesn't work. The dropdown renders as expected now.

<p-column field="RoleName" header="User Role" [style]="{'overflow':'visible'}"> <template let-col let-user="rowData" pTemplate="editor"> <p-dropdown [(ngModel)]="user[col.field]" [options]="roles" [style]="{'width':'100%'}"></p-dropdown> </template> </p-column>

[cagataycivici]

My suggestion is appendTo="body" on dropdown in cases like these.