[HxInputDate] - Inconsistent styling when used with InputGroups

[DaleCam]

When using input groups with the HxDateInput gives us inconsistent styling. I cant seem to get it looking right. Below are 2 ways i tried, and the screenshot helps you to see the working HxInputText fields (the Note row) vs the not working HxDateInput (the Last Checked row). Here is what I have tried:

<div class="row mb-2">
    <label class="col-sm-3 pe-0">Last Checked</label>
    <div class="col-sm-9">
        <HxInputDate TValue="DateTime?" @bind-Value="ChangedLocation.DateLastCheckedUtc">
            <InputGroupEndTemplate>
                <span class="input-group-text" @onclick="() => ChangedLocation.DateLastCheckedUtc = null">
                    <i class="fas fa-times"></i>
                </span>
            </InputGroupEndTemplate>
        </HxInputDate>
    </div>
</div>

which ends up looking like this (HxInputText above it for comparison):

and also this approach:

  <div class="row mb-2">
      <label class="col-sm-3 pe-0">Last Checked</label>
      <div class="col-sm-9">
          <div class="input-group">
              <HxInputDate TValue="DateTime?" @bind-Value="ChangedLocation.DateLastCheckedUtc" />
              <span class="input-group-text" @onclick="() => ChangedLocation.DateLastCheckedUtc = null">
                  <i class="fas fa-times"></i>
              </span>
          </div>
      </div>
  </div>

which is closer - but doesn't get the 100% width of the col like the HxInputText controls do:

Any ideas? Thank you!

[crdo]

There is quite extensive test page at BlazorAppTest/Pages/HxInputDateTest.razor where all the variants with InputGroups work just fine.

If you still think there is an issue in our lib, please provide a minimal reproducing repo.

[DaleCam]

Thanks @crdo - I didnt know about those tests - thats helpful thanks. Perhaps im on a different version of bootstrap or there is a subsequent style overriding the bootsrap. Ill do a bit more research and hopefully get back soon. Thanks again for your reply!