pInputMask not rendering properly with p-inputgroup class

preraktiwari commented 3 years ago

I am using primeng v11.1.0 with Material Design Indego theme. I am using floating label with inputMask.

When I am using inputgroup class the input mask is not rendering properly:

<div class="p-inputgroup" >
  <span class="p-float-label">
    <p-inputMask maxlength="6" [formControl]="emailCode" mask="999999"></p-inputMask>
    <label for="emailCode">Email Code</label>
  </span>
  <button type="button" pButton pRipple label="Search"></button>
</div>

VandenAbbeeleBram commented 3 years ago

I'm having the same issue. You can use the following temporary fix: .p-inputgroup .p-inputtext, .p-fluid .p-inputgroup .p-inputtext { width: 100% !important; }

Add it to your styles.css file and it will render properly.

cetincakiroglu commented 1 year ago

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

primefaces / primeng

pInputMask not rendering properly with p-inputgroup class #9826