Pull button to the right of the panel header in primeng panel widget

Question

I have a prime ng button on my panel header. I would like to pull it to the right of the panel header. Please can someone tell me

  <p-header>
    <h4>Data View</h4>
    <button pButton type="button" [style]="{'float':'right'}" label="New Data" icon="fa-plus" (click)="createData()" class="ui-button-danger"></button>
  </p-header>

Also seems like button doesn't have a style class, is there a way to specify a css class to a primeng button widget?

SaxyPandaBear SaxyPandaBear · Accepted Answer · 2017-07-05T23:47:02

You could use plain HTML/CSS type styling.

So instead of doing [style]="..." you could do regular CSS.

<button pButton type="button" style="float: right;" ....</button>

Or if you don't want inline styling, you could do something like

.my-button {
    float: right;
    ....
}

You have to remember that although PrimeNG does a lot of the work for you, it's just javascript/typescript and HTML/CSS under the hood. You can still do basic CSS styling on them. I've definitely had to do that to trim down buttons because they use too much screen space IMO.

Pull button to the right of the panel header in primeng panel widget

2 Answers