javascript - Dialog component in primeNG no responsive on mobile view - Stack Overflow

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 ponent from primeNG isn't easy. Maybe helpful will be JS?

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 ponent from primeNG isn't easy. Maybe helpful will be JS?

• javascript
• css
• angular
• primefaces
• primeng

Share Improve this question Follow asked Jun 30, 2017 at 8:45 ItalikItalik 69633 gold badges2020 silver badges3737 bronze badges 1

• Please correct your tagging (read the content of all tags and remove those the one you are not using) – Kukeltje Commented Jun 30, 2017 at 9:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

<p-dialog styleClass="myStyle">

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