p-password diamond NG 13

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
ipindado
Posts: 5
Joined: 15 Mar 2017, 09:44

09 Jan 2022, 14:51

Hi...

Is it possible that there is some missing scss for the p-password with toggleMask enabled in the diamond template for v13?

I don't manage to display the toggle button correctly, neither my application or the stock template.
I added one additional field to the stock template "formlayoutdemo.component.html" for testing but the toggle button is aligned always below the input field

Code: Select all

			<h5>Vertical</h5>
			<div class="p-fluid">
				<div class="p-field">
					<label for="firstname1">Name</label>
					<input id="firstname1" type="text" pInputText>
				</div>
				<div class="p-field">
					<label for="lastname1">Email</label>
					<input id="lastname1" type="text" pInputText>
				</div>
				<div class="p-field">
					<label for="age1">Age</label>
					<input id="age1" type="text" pInputText>
				</div>
				<div class="p-field">
					<label for="age1">password</label>
					<p-password [toggleMask]="true"></p-password>
				</div>
			</div>
		</div>
And comparing both the main component packge with the template one seems to be different.

Thanks and best regards.

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

03 Feb 2022, 10:27

Hi,

Here are the two fastest possible solutions to this problem.

1- By using ngModel.

In component.html

Code: Select all

		<div class="p-field">
			<label for="age1">password</label>
			<p-password [toggleMask]="true" (ngModel)]="value3"></p-password>
		</div>
In component.ts

Code: Select all

...
	value3: String;
...
2- By giving a styleClass to p-password component and targeting the elements inside by css.

In component.html

Code: Select all

		<div class="p-field">
			<label for="age1">password</label>
			<p-password [toggleMask]="true" styleClass="input-pass"></p-password>
		</div>
In component.ts

Code: Select all

		@Component({
			templateUrl: [....],
			styles: [`
				    	:host ::ng-deep .input-pass{
        					position:relative;
    					}
      					 :host ::ng-deep .input-pass > .pi {
        					position:absolute;
        					right:1%;
    					}    		
			`]
		})

Regards,

Post Reply

Return to “Diamond - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests