Primeng Cannot find a differ supporting object 'width: 100%' when using style

Question

I get the error "Cannot find a differ supporting object 'width: 100%' " when I try to use style with p-menu or p-dropdown .

Answer 1

I had this issue when working with the p-confirmDialog, so I looked at their source to see what was going on. PrimeNG passes the value from the [style] attribute as-is to the component's [ngStyle], which takes an object. So, the solution is:

<p-confirmDialog [style]="{'width': '100%'}">
  ...
</p-confirmDialog>

Answer 2

https://github.com/primefaces/primeng/commit/b774ab2a5811b223c49dcef55ba84bcbcfa09579

1. check primeNg version.
2. if the version is more than 8.1.1
3. update p-button style value(string) to objects.

++ [ngStyle] also works

      <p-button 
      label="button"
      [style]="{float: 'left'}"
      styleClass="ui-button-info" ></p-button>