Using the "w-full" class doesn't work on prime components

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages
Post Reply
jacksonpaullee
Posts: 1
Joined: 23 Jun 2020, 03:38

23 Jul 2021, 20:48

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!

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

27 Oct 2021, 09:16

Hi,

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>
Best regards,
Merve Özçifçi

jwakeen
Posts: 2
Joined: 14 Jul 2021, 00:05

02 Nov 2021, 18:57

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.

Code: Select all

<p-inputNumber formControlName="age" [inputStyle]="{'width':'100%'}"></p-inputNumber>
I can use an inputStyleClass like this, but that requires the css pseudo-class ::ng-deep, which is deprecated.

Code: Select all

<p-inputNumber formControlName="age" inputStyleClass="width-100"></p-inputNumber>
The inputStyleClass solution requires the following css:

Code: Select all

:host ::ng-deep .width-100 {
  width: 100%;
}
It would be great to know what the recommended way to do this is?

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

26 Apr 2022, 03:28

Hi,

InputNumber is a special component. It has some wrapper elements. So, the inputStyleClass="w-full" solution looks good.

Best Regards,

Post Reply

Return to “PrimeFlex”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests