Раскрывающийся список PrimeNG скрыт диалогом

ProgramBox

Раскрывающийся список PrimeNG скрыт диалогом

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#angular #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>

Если кто-нибудь может дать какой — либо совет по этому поводу, я был бы очень признателен.

1. Попробуйте appendTo=»тело» в диалоговом окне или удалите переполнение из div ui-dialog-content.

2. Вы когда — нибудь решали эту проблему-у меня тоже такая же проблема? Приложение, ни добавление css переполнения, казалось, не помогли

3. @TheUnculledBadger Я добавил свой код в качестве ответа

Ответ №1:

Необходимо добавить атрибут appendTo .

напр.

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

1. Проблема с вашим решением, если тело больше, чем ваш экран, и вы можете прокручивать, раскрывающаяся панель перемещается вместе с ним, но не с вашим диалогом…

2. Спасибо! Тоже спас мне день, ха-ха

Ответ №2:

Это из официальной документации NG Prime. Когда диалоговое окно включает другие компоненты с наложениями, такими как раскрывающийся список, часть наложения не может превышать границы диалогового окна из-за переполнения. Чтобы решить эту проблему, вы можете либо добавить наложение к телу, либо разрешить переполнение в диалоговом окне.

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

или

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

Ответ №3:

Существует два основных способа решения этой проблемы:

Добавьте appendTo раздел к каждому компоненту, который должен иметь возможность переполнять диалоговое окно.
```
 <p-dialog>
    <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
 
```
Проблемы с этим подходом: (а) Вам нужно добавить appendTo раздел к каждому элементу вашего диалогового окна, который может переполниться, и (б) если страница за диалоговым окном достаточно велика, чтобы вы могли прокручивать, раскрывающееся меню будет прокручиваться вместе со страницей, а не с диалоговым окном.
Предпочтительный подход: Разрешить p-dialog переполнение.
```
 <p-dialog [contentStyle]="{'overflow':'visible'}">
   <p-dropdown></p-dropdown>
</p-dialog>
 
```
Если вы используете a p-footer , вам также может потребоваться включить следующее в свой файл css, чтобы убедиться, что нижний колонтитул отображается правильно (по сути, это добавление класса ui-g-12 в тот div , который содержит нижний колонтитул).:
```
 p-dialog /deep/ .ui-dialog-footer {
   width: 100%;
   float: left;
   box-sizing: border-box;
   padding: .5em;
}
 
```

Примечание: Оба эти решения перечислены в документе PrimeNG для p-диалога, хотя в документах не объясняется, как правильно отобразить нижний колонтитул.

1. Проблема в [contentStyle]="{'overflow':'visible'}" том, что если размер диалогового окна меньше высоты раскрывающегося списка, то раскрывающийся список все равно будет отображаться на экране, а не скрываться при уменьшении диалогового окна

2. Если я оберну выпадающий список p-диалогом, выпадающий список исчезнет.

Ответ №4:

Вот код, который сработал для меня:

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

1. Всем привет.. Это определенно улучшило ситуацию, теперь она больше не выглядит обрезанной, однако, вы добавили что-нибудь еще в стиль, чтобы увеличить высоту раскрывающегося контейнера p?

Ответ №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}']

Ответ №6:

Угловой/Пример 12

Это работает для меня:

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

Метки: Раскрывающийся список PrimeNG скрыт диалогом