5

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: enter image description here

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>
freeBeerTomorrow
  • 343
  • 4
  • 20
  • Can you share a working example? fiddle or pen? – Pranesh Ravi Sep 16 '16 at 16:04
  • Any examples I use from: https://getmdl.io/components/#textfields-section I get the same gap when added to my code. But they render fine online. – freeBeerTomorrow Sep 16 '16 at 16:23
  • As @PraneshRavi said, without seeing your implemented code, we won't be able to help. – Praveen Sep 16 '16 at 16:36
  • Try implementing like https://jsfiddle.net/link2pk/4t662wdk/ – Praveen Sep 16 '16 at 16:52
  • I have the same issue. I am using componentHandler.upgradeDom() because the html is added dynamically. Issue is in both IE and Chrome. Putting bottom: 15px on mdl-textfield__label:after fix the issue (HACK). – Stephane Sep 17 '16 at 16:03
  • I have verified that upgradeDom() is called when the page loads. I'm noticing a similar issue with my mdl spinner. It shows "Loading..." instead of the spinning animation, which also seems to be the same issue. Any advice? – freeBeerTomorrow Sep 17 '16 at 21:39

1 Answers1

6

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.

likinM
  • 314
  • 3
  • 9