Material Design Lite - Bottom Line in text field has a slight gap with colored line

Question

I am trying to get Material Design Lite text field to work and I have an issue where the bottom colored line has a slight 3-4 px gap between the gray starting line. Any MDL text Field example I plug into my page I get the same result, what can locally be triggering the issue? Also I am using react.js on the frontend.

I am on 1.2.1 of material design lite.

Here is an image:

Here is my code:

<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input className="mdl-textfield__input" type="text"/>
        <label className="mdl-textfield__label" htmlFor="nameField">
            Your name
        </label>
</div>

Answer 1

I did face the same issue with MDL when used with boostrap and turns out the boostrap css file adds a margin of 5px to its bottom for the Label elment which creates a 5px gap.

JSFiddle-Recreating the issue

Code snippet from Bootstrap.css file

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

Fix would be reduce the margin-bottom of the label element to 0px.

Fix- JsFiddle

.mdl-textfield__label{  
   margin-bottom:0px;
 }

Hope this helps.