Material Design Lite - Bottom Line In Text Field Has A Slight Gap With Colored Line

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 Fi

Solution 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.