Dialog component in primeNG no responsive on mobile view

I use primeNG (Angular2) to show the modal:

<p-dialog appendTo="body" [(visible)]="displayCreateGateway" modal]="true" [width]="700">

When I am on mobile view (less than declared 700px) modal does not display correctly. For example: I have window width 500 px, but modal generates in 700 px (properly will be width:100%). I think this is not fault of my code, because in official website primeNG situation is the same.

Do you know how to solve this problem? The easiest way is probably add media queries in css, but override component from primeNG isn't easy. Maybe helpful will be JS?

Answers:

Answer

If you look at the documentation of the component, you will see a styleClass attribute, used like this :

<p-dialog styleClass="myStyle">

When you do that, it adds a new class to the component, allowing you to style it as you want.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.