Я хочу переместить 3 кнопки вправо (кнопки сохранения, редактирования, удаления). Кто-нибудь может сказать мне, что мне не хватает, пожалуйста? Вот мой код:

PLUNKER

<p-dialog
[(visible)]="display" [draggable] = 'false'>
<p-header>
ACTIVE ALERT
  <button pButton type="button" icon="fa-save" (click)="saveAlert()">
  </button>
  <button pButton type="button" icon="fa-pencil" (click)="editItem()">
  </button>
  <button pButton type="button" icon="fa-trash"></button>
</p-header>
  <textarea [rows]="7" [cols]="60">
  </textarea>
</p-dialog>

Я также пробовал делать:

"float: right"

<div style = "float:right">
  <button pButton type="button" icon="fa-save" (click)="saveAlert()"></button>
 <button pButton type="button" icon="fa-pencil" (click)="editItem()"></button>
<button pButton type="button" icon="fa-trash"></button>
</div>

Но он перемещает все кнопки вправо и перемещает кнопку ЗАКРЫТЬ (X) влево.

ПРИМЕЧАНИЕ.

  • Нажмите кнопку «Показать», чтобы увидеть мой диалог с кнопками в заголовке.

  • Я хочу переместить все кнопки вправо и оставить кнопку закрытия полностью вправо. Кнопки удалить и закрыть должны быть рядом друг с другом.

2
Devmix 1 Мар 2018 в 20:07

1 ответ

Лучший ответ

Попробуйте добавить это в свой файл CSS:

.ui-dialog-titlebar-close {
  position:absolute;
  right:0;
}

С участием :

<div style = "float:right">
  <button pButton type="button" icon="fa-save" (click)="saveAlert()"></button>
 <button pButton type="button" icon="fa-pencil" (click)="editItem()"></button>
<button pButton type="button" icon="fa-trash"></button>
</div>

См. Plunker.

2
Antikhippe 1 Мар 2018 в 20:49