Выпадающий список PrimeNG, скрытый диалогом

У меня есть приложение Angular2 с использованием компонентов PrimeNG.Выпадающий список 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 = «тело» в диалоговом окне или удалить переполнение из div-div-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>

Edit: ценам добавляется вы можете настроить ширину выпадающего списка, используя следующий стиль в компоненте

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

источник

2017-04-26 10:43:08 Piero

Выпадающий список PrimeNG, скрытый диалогом

ответ

Смежные вопросы