Hi All, I am having a issue with dropdown embedded in PrimeNG datatable. When I launch new page from one of the Action in dropdown...the drop down is carried to next screen (non model form) and doesn't go away until I refresh the page. See Screenshots..
<p-column field=""
header="{{l('Actions')}}"
[sortable]="false"
[style]="{'width':'130px','text-align':'center'}"
[hidden]="!isGrantedAny('Pages.Tenant.SomeSecurity')">
<ng-template let-record="rowData" pTemplate="body">
<div class="btn-group dropdown" normalizePosition>
<button class="dropdown-toggle btn btn-sm btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
</button>
<ul class="dropdown-menu">
<li>
<a *ngIf="permission.isGranted('Pages.Tenant.SomeSecurity')"
(click)="onView(record.id)">{{l('Edit')}}</a>
</li>
<li>
<a *ngIf="permission.isGranted('Pages.Tenant.SomeSecurity')"
(click)="onView(record.id)">{{l('Activate')}}</a>
</li>
<li>
<a *ngIf="permission.isGranted('Pages.Tenant.SomeSecurity')"
(click)="onView(record.id)">{{l('Discard')}}</a>
</li>
</ul>
</div>
</ng-template>
</p-column>
[attachment=1:2oa8k11n]ActionPic1.PNG[/attachment:2oa8k11n]
[attachment=0:2oa8k11n]ActionPic2.PNG[/attachment:2oa8k11n]
when I go back, the dropdown stays in the screen and when click on another Action it opens another one. I don't see any page errors in chrome console. Am I missing something?
Appreciate your quick reply. Thank you!
2 Answer(s)
-
0
It might be that some other library's CSS interferes with this one. Can you check the current pop-up's assigned CSS properties with the original ones in AspNet Zero Demo website
-
0
this issue has been fixed by adding below code to main-routing.module.ts (Just copied from admin-routing.module.ts)
constructor(private router: Router) { router.events.subscribe(() => { this.hideOpenDataTableDropdownMenus(); }); } hideOpenDataTableDropdownMenus(): void { let $dropdownMenus = $('.dropdown-menu.tether-element'); $dropdownMenus.css({ 'display': 'none' }); }Thanks
