Question

我有一个使用PrimeNG组件的Angular2应用程序。

我想在对话框中输入一个下拉列表。但是，当我实现此功能时，下拉菜单会被对话框的限制所截断，如下面的屏幕截图所示。我想要的是它显示在对话框上方并显示所有选项。

这只是一个小对话框，我不想为此创建一个大对话框，因为会有很多空的未使用空间。

我的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>

如果有人能对此提出任何建议，我们将不胜感激。

Answer 1

必须添加属性appendTo。

e.g。

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

Answer 2

以下代码对我有用：

/**
 * Implements the abstract base for all enum types
 * @see http://stackoverflow.com/a/2324746/1003020
 * @see http://stackoverflow.com/a/254543/1003020
 *
 * Example of a typical enum:
 *
 *    class DayOfWeek extends Enum
 *    {
 *        const Sunday    = 0;
 *        const Monday    = 1;
 *        const Tuesday   = 2;
 *        const Wednesday = 3;
 *        const Thursday  = 4;
 *        const Friday    = 5;
 *        const Saturday  = 6;
 *    }
 *
 * Usage examples:
 *
 *     $monday = DayOfWeek::Monday                      // (int) 1
 *     DayOfWeek::isValidName('Monday')                 // (bool) true
 *     DayOfWeek::isValidName('monday', $strict = true) // (bool) false
 *     DayOfWeek::isValidValue(0)                       // (bool) true
 *     DayOfWeek::fromString('Monday')                  // (int) 1
 *     DayOfWeek::toString(DayOfWeek::Tuesday)          // (string) "Tuesday"
 *     DayOfWeek::toString(5)                           // (string) "Friday"
 **/
abstract class Enum
{
    private static $constCacheArray = NULL;

    private static function getConstants()
    {
        if (self::$constCacheArray == NULL) {
            self::$constCacheArray = [];
        }
        $calledClass = get_called_class();
        if (!array_key_exists($calledClass, self::$constCacheArray)) {
            $reflect = new \ReflectionClass($calledClass);
            self::$constCacheArray[$calledClass] = $reflect->getConstants();
        }
        return self::$constCacheArray[$calledClass];
    }

    public static function isValidName($name, $strict = false)
    {
        $constants = self::getConstants();

        if ($strict) {
            return array_key_exists($name, $constants);
        }

        $keys = array_map('strtolower', array_keys($constants));
        return in_array(strtolower($name), $keys);
    }

    public static function isValidValue($value, $strict = true)
    {
        $values = array_values(self::getConstants());
        return in_array($value, $values, $strict);
    }

    public static function fromString($name)
    {
        if (self::isValidName($name, $strict = true)) {
            $constants = self::getConstants();
            return $constants[$name];
        }

        return false;
    }

    public static function toString($value)
    {
        if (self::isValidValue($value, $strict = true)) {
            return array_search($value, self::getConstants());
        }

        return false;
    }
}

Answer 3

这是来自NG Prime官方文档。当对话框包括具有覆盖的其他组件（例如下拉菜单）时，由于溢出，覆盖部分不能超出对话框的边界。为了解决这个问题，您可以将叠加层附加到主体上，也可以在对话框中允许溢出。

<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>

OR

 <p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>

Answer 4

有两种主要方法可以解决此问题：

向每个需要使对话框溢出的组件添加一个appendTo部分。
```
<p-dialog>
    <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
```
此方法存在的问题：（a）您需要向对话框中可能会溢出的每个项目添加appendTo部分，以及（b）如果对话框后面的页面是足够大以至于您可以滚动，则溢出的下拉菜单将滚动页面而不是对话框滚动。
首选方法：允许p-dialog溢出。
```
<p-dialog [contentStyle]="{'overflow':'visible'}">
   <p-dropdown></p-dropdown>
</p-dialog>
```
如果您使用的是p-footer，则可能还需要在css文件中包括以下内容，以确保页脚正确显示（这实际上是将类ui-g-12添加到{{1 }}包含页脚）：
```
div
```

注意：这两种解决方案均在PrimeNG Doc for p-dialog下列出，尽管文档并未说明如何使页脚正确显示。

Answer 5

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

例如

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

编辑：另外，您可以使用组件中的以下样式调整下拉列表的宽度

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

Answer 6

Angular/PrimeNG 12+

这对我有用：

  <p-dialog [contentStyle]="{'overflow':'visible'}"></p-dialog>

通过对话框隐藏的PrimeNG下拉列表

6 个答案: