Primeng- Angular2 - p-dataTable中的下拉列表存在样式问题

时间:2016-10-26 14:30:41

标签: angular

我正在使用primeng数据表并在其中应用了一个下拉列表。一切正常,除非填充下拉列表我无法通过鼠标打开下拉列表,但我可以通过键盘更改所选项目。 我已经从我的UI附加了图像。

<p-dataTable [value]="sites" [(selection)]="selectedSites" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
            <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
            <p-column field="siteName" header="{{'SITE_FORM.SITENAME' | translate}}" sortable="true"></p-column>
            <p-column field="clientName" header="{{'SITE_FORM.CLIENTNAME' | translate}}" sortable="true"></p-column>
            <p-column header= "{{ 'ROLE_FORM.NAME' | translate }}">
                <template let-site="rowData" pTemplate type="body">
                    <p-dropdown [style]="{'width':'100%'}" [options]="site.rolesSelectItem" [(ngModel)]="site.selectedRole"></p-dropdown>
                </template>                  
            </p-column>
</p-dataTable>

UI result in my local machine

2 个答案:

答案 0 :(得分:3)

尝试;

<p-dropdown appendTo="body"

答案 1 :(得分:0)

解决方案:

我从ngPrime网站添加了主题,它现在正在运行,但它覆盖了我们自己的主题,我不确定我是否只是从下拉列表中获取样式并将其添加到我们的样式中。无法