由对话框隐藏的PrimeNG下拉框

我有一个使用PrimeNG组件的Angular2应用程序。由对话框隐藏的PrimeNG下拉框

我想要一个对话框中的下拉菜单。但是，当我已经实现这个时，下面的对话框的限制被截断，如下面的屏幕截图所示。我想要的是它显示在对话框上方，并显示所有选项。

这只是一个小对话框，我不希望创建一个大的本作将会有大量的空的未使用空间。此

我的HTML代码如下：

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" minHeight="200"> 
    <div class="row col-md-12" align="center"> 
     <button pButton (click)="viewRepack()" label="View Repack"></button> 
    </div> 
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div> 
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown> 
    <button pButton label="Save" (click)="save()" style="float:right;margin-right:3px;margin-top:5px;"></button> 
</p-dialog>

如果有人能提供有关这一点，将不胜感激的任何建议。

来源

2016-11-08 DaRoGa

尝试appendTo =对话框中的“body”或从ui-dialog-content div中删除溢出。 –

你有没有解决过这个问题 - 我也有这个问题？ appendTo和溢出css除了似乎有帮助 –

@ TheUnculledBadger我已经添加了我的代码作为答案 – DaRoGa

有必要添加属性appendTo。

例如

<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>

来源

2017-03-21 14:58:52 esdef

这里是为我工作的代码：

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" resizable="true"> 
    <div class="row col-md-12" align="center" style="overflow-y:visible"> 
     <button pButton (click)="ViewRepack()" label="View Repack"></button> 
    </div> 
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div> 
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width:'200px', position:'fixed'}"></p-dropdown> 
    <button pButton label="Save" (click)="ChangeTable()" style="float:right;margin-right:3px;"></button> 
</p-dialog>

来源

2016-11-17 15:31:59 DaRoGa

嗨那里..肯定有改进的事情，它不再像现在它的切断，但是，你是否把其他东西样式来增加p-dropdown容器的高度？ –

添加[autowidth]="false"到p-dropdown

如

<p-dropdown [options]="colors" [(ngModel)]="selectedColor" 
      [autoWidth]="false"></p-dropdown>

编辑：additionnaly你可以调整使用以下样式的下拉列表的宽度在组件

styles: [':host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']

来源

2017-04-26 10:43:08 Piero

由对话框隐藏的PrimeNG下拉框

回答

相关问题