18

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

mruanova
  • 6,351
  • 6
  • 37
  • 55
Hima Susan
  • 401
  • 1
  • 4
  • 8

4 Answers4

35

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>
sawprogramming
  • 737
  • 1
  • 9
  • 15
  • This answer returns also true for the DynamicDialog component in primeng (used at v.7.0.5). – j4v1 Apr 23 '19 at 13:19
  • 1
    For me it doesn't work for p-dropdown. I found the next line in Angular Docs about [style]: "When binding [style] to an object expression, the identity of the object must change for Angular to update the class list. Updating the property without changing object identity has no effect." As I understand it's connected. Not find the solution yet. – Experimenter Feb 01 '22 at 15:35
  • 1
    Changing [style] to [ngStyle] helps me. – Experimenter Feb 01 '22 at 15:52
6

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>
Energy
  • 940
  • 13
  • 20
0

I was trying to add styles to the content of a DinamicDialog but this worked for me.

this.ref = this.dialogService.open(MyComponent, {
  header: 'contentStyle Header',
  width: '80%',
  height: '80%',
  contentStyle: { height: '100%' }
});
edalvb
  • 581
  • 6
  • 7
-3

That's because [style] takes a string, so you need to write [style]="'width: 40%'"

petronius
  • 451
  • 3
  • 11