Floating label is cut off at bottom

[Devnsyde]

I know there probably isn't an issue with this code, and the issue resides on my side. However I was hoping that if anyone has seen this before they could recommend a fix?

With:

<div class="form-group">
            <div class="input-group input-group-lg">
                <div class="floating-label">
                    <label for="inputContactName">Contact Name</label>
                    <input type="text" class="form-control" id="inputContactName" placeholder="Contact Name" ng-model="CustomerModel.ContactName">
                </div>
                <span class="input-group-icon">
                    <i class="material-icons">person</i>
                </span>
            </div>
        </div>

When I click the field the label moves up but the bottom of the label is hidden.

Doesn't matter the size of input or floating label I use, it does the same thing.

If I put mt-1 on the form-control it renders fine.

<div class="form-group">
            <div class="input-group input-group-lg">
                <div class="floating-label">
                    <label for="inputCompanyName">Company Name</label>
                    <input type="text" aria-describedby="inputCompanyHelpText" class="form-control mt-1" id="inputCompanyName" placeholder="Company Name" ng-model="CustomerModel.CompanyName" required>
                    <div id="inputCompanyHelpText" class="invalid-feedback">
                        Please provide a company name.
                    </div>
                </div>
                <span class="input-group-icon" id="exampleIconInput1Help">
                    <i class="material-icons">event</i>
                </span>
            </div>
        </div>

[djibe]

Hi, I don't reproduce this with my fork: https://djibe.github.io/material/docs/4.5/material/text-fields/#with-icons

Do you ?

[Devnsyde]

I moved to your fork and I am not seeing this issue anymore.

[djibe]

Cool. Your feedback is very welcome in my fork !