Hey,
How can I make the p-dialogue to be responsive for both portrait and landscape modes. I have tried [responsive]="true" and setting width in the css media query but nothing seems to work. Can you please help me?
How to make p-dialogue responsive
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi, this is my p-dialogue code. I am making a simple login panel which takes user's credentials.
<p-dialog [(visible)]="display" modal="modal" showEffect="fade" width="400" [closable]="false" [draggable]="false" appendTo="body">
<div class="login-panel ui-fluid">
<div class="login-panel-content">
<div class="ui-g form-group" style="margin-bottom: 16px;">
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText [(ngModel)]="userNameAs" style="width:100% !important">
<label>Name</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password" pInputText [(ngModel)]="passwordAs" style="width:100% !important">
<label>Password</label>
</span>
</div>
</div>
</div>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
<button type="button" pButton icon="fa-close" (click)="display=false;logindisplay(false)" label="Cancel"></button>
<button type="button" pButton icon="fa-check" (click)="logInAs()" label="Sign-in"></button>
</div>
</p-footer>
</p-dialog>
<p-dialog [(visible)]="display" modal="modal" showEffect="fade" width="400" [closable]="false" [draggable]="false" appendTo="body">
<div class="login-panel ui-fluid">
<div class="login-panel-content">
<div class="ui-g form-group" style="margin-bottom: 16px;">
<div class="ui-g-12">
<span class="md-inputfield">
<input type="text" pInputText [(ngModel)]="userNameAs" style="width:100% !important">
<label>Name</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input type="password" pInputText [(ngModel)]="passwordAs" style="width:100% !important">
<label>Password</label>
</span>
</div>
</div>
</div>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
<button type="button" pButton icon="fa-close" (click)="display=false;logindisplay(false)" label="Cancel"></button>
<button type="button" pButton icon="fa-check" (click)="logInAs()" label="Sign-in"></button>
</div>
</p-footer>
</p-dialog>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 3 guests