I get the error "Cannot find a differ supporting object 'width: 100%' " when I try to use style with p-menu or p-dropdown .
-
can you specify which style property are you setting on p-menu?Shubhi Sood– Shubhi Sood2018-06-07 09:31:42 +00:00Commented Jun 7, 2018 at 9:31
-
style="width: 40%" width propertyHima Susan– Hima Susan2018-06-07 10:05:16 +00:00Commented Jun 7, 2018 at 10:05
Add a comment
|
4 Answers
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>
3 Comments
j4v1
This answer returns also true for the DynamicDialog component in primeng (used at v.7.0.5).
Experimenter
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
Changing [style] to [ngStyle] helps me.
https://github.com/primefaces/primeng/commit/b774ab2a5811b223c49dcef55ba84bcbcfa09579
- check primeNg version.
- if the version is more than 8.1.1
- update p-button style value(string) to objects.
++ [ngStyle] also works
<p-button
label="button"
[style]="{float: 'left'}"
styleClass="ui-button-info" ></p-button>
Comments
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%' }
});
Comments
That's because [style] takes a string, so you need to write [style]="'width: 40%'"
1 Comment
mrconcerned
it gives the same result, nothing changed.