angular - PrimeNG Angular2 css 对话框

Question

您好，我一直在使用 angular2 和 PrimeNG 我有以下问题：我有一个无法动态调整垂直大小的对话框。

<div ng-reflect-raw-class="[object Object]" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-dialog-draggable" style="display: block; visibility: visible; left: 250px; top: 67px; z-index: 1040; opacity: 1.056; width: 563px; ">
            <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top">


<p-dialog header="User details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">

如果我添加一个 height="500" 或其他内容，对话框的高度将会改变，但看起来像这样：

我希望在底部有保存按钮并能够看到所有内容。当房间可用时。

Answer 1

 .ui-dropdown-item span{
    font-size: 12px;
}

.ui-dropdown-items-wrapper{
    position: absolute;
    width: 100%;
    border: 1px solid #b4b1b0;
    border-radius: 5px;
}

正确的方法是更改​​ style.css 它解决了我的问题。

Answer 2

简单的方法是在组合之后添加一些<br>或固定高度的 div

PS：我注意到您一直在尝试使用 styleClass 向对话框添加一个类，不要添加括号。

例子：

<p-dialog header="User details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" styleClass="userdialog">

Answer 3

正确的方法是在style.css中改变

.ui-dropdown-panel {
    position: inherit !important;   
    top:0px !important;  
}