How to place a right justified button in dialog header.

[PhilHuhn]

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.