p-calendar inside an inputgroup

[MPP_Dev1]

When adding p-calendar to an input group, all styling that would apply to the width is ignored. See the below image where the top is p-calendar outside the input group and the bottom is p-calendar inside the input group. Below the image is the code currently in use. I have tried apply [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" to p-calendar, as well as additional width styling to the input group.

Does anyone know a quick solution to this?

Code: Select all

<div class="p-inputgroup">
<p-calendar [showTime]="true" [readonlyInput]="true"></p-calendar>
<button type="button" pButton icon="fas fa-trash-alt"></button>
</div>