How to place a right justified button in dialog header.

UI Components for Angular
Post Reply
PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

25 Apr 2021, 14:46

Hey, I am using Angular 11. I want to place a button in the right corner of a dialog title-bar (header). I emulated it as follows:

Code: Select all

<div class='p-dialog-header'>
  <span class='p-dialog-title'>
    <p-header>
      <div style='display: flex; justify-content: space-between;'>
        <div style='justify-content: flex-start;'>
          Some Dialog Title
        </div>
        <div style='justify-content: flex-end;'>
          <button pButton type='button' icon='pi pi-image' class='p-button-primary'></button>
        </div>
      </div>
    </p-header>
  </span>
</div>
SOLUTION:

I did come to a solution. By placing background colors in the title-bar DIV tags. I found that it was not expanding to 100%. The SPAN tag was collapsed. So, I added the following to my style.css:

Code: Select all

.p-dialog-title { width: 100%; }
I hope this will help.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests