I'm using the grid system form layout. Everything works as expected when I use the standard HTML input tag. However, in my form, I use a couple of p-InputMasks and p-Dropdowns. In the example code for "Advanced" (https://www.primefaces.org/primeflex/formlayout), the class "'w-full" is used to make the input span the full width of the column. When I try to use that class for my InputMasks and Dropdowns it doesn't work. Below is some example code.
<div class="formgrid grid">
//THIS WORKS
<div class="field col-12>
<label for="firstName">First Name</label>
<input class="w-full" type="text" pInputText name="firstName" [(ngModel)]="patient.firstName">
</div>
//THIS DOESN'T WORK
<div class="field col-12>
<label for="dateOfBirth">Date of Birth</label>
<p-inputMask class="w-full" mask="99/99/9999" name="dateOfBirth" [(ngModel)]="patient.dateOfBirth"></p-inputMask>
</div>
</div>
I would assume it isn't just "w-full" that doesn't work on these components, but every sizing class. If this could be fixed that would be highly appreciated. Otherwise, if there is a different/new way to do it, please let me know.
Thanks!
Using the "w-full" class doesn't work on prime components
Hi,
Could you try using styleClass property for p-InputMask component? You can see details in this link; http://primefaces.org/primeng/showcase/#/inputmask
Best regards,
Merve Özçifçi
Could you try using styleClass property for p-InputMask component? You can see details in this link; http://primefaces.org/primeng/showcase/#/inputmask
Code: Select all
<p-inputMask styleClass="w-full" mask="99/99/9999" name="dateOfBirth" ></p-inputMask>
Merve Özçifçi
Adding styleClass="w-full" to the input mask did not work. I suspect all the input components will behave similarly. Can anyone confirm? I've found 2 other ways to make this work.
In order for the component to render correctly with the col-* classes, it needs to have a width of 100%. I can use an inline style like this, but that's not a best practice.
I can use an inputStyleClass like this, but that requires the css pseudo-class ::ng-deep, which is deprecated.
The inputStyleClass solution requires the following css:
It would be great to know what the recommended way to do this is?
In order for the component to render correctly with the col-* classes, it needs to have a width of 100%. I can use an inline style like this, but that's not a best practice.
Code: Select all
<p-inputNumber formControlName="age" [inputStyle]="{'width':'100%'}"></p-inputNumber>
Code: Select all
<p-inputNumber formControlName="age" inputStyleClass="width-100"></p-inputNumber>
Code: Select all
:host ::ng-deep .width-100 {
width: 100%;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
InputNumber is a special component. It has some wrapper elements. So, the inputStyleClass="w-full" solution looks good.
Best Regards,
InputNumber is a special component. It has some wrapper elements. So, the inputStyleClass="w-full" solution looks good.
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 10 guests