1

I'm trying to use MDL in an AngularJS project.

To install MDL, I've followed the instructions for bower found here: https://getmdl.io/started/index.html

Then I'm using this code, just right after the : https://getmdl.io/components/#textfields-section

<!-- Simple Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

I've already tested in chrome and in firefox, and when I focus the element, I'm getting this:

enter image description here

I don't have any clues why the focus is not aligned with the input border-bottom (as it shoud be). Any ideas about the reason and how to fix it?

EDIT: The problem is due to a conflict with Bootstrap, which I'm also using in my project. How to use both Boostrap and MDL and eliminate this conflict?

João Otero
  • 948
  • 1
  • 15
  • 30
  • The font in your text area does not look like the MDL font. Do you 1) Have any other JS/CSS files in your website or 2) Have any errors in your console saying that one of the MDL files could not load or 3) Is the `
    ` encapsulated in some other element that would change the font size/weight/family ?
     – Jonathan Aug 10 '17 at 03:13
  • good tip Jonathan, I will check – João Otero Aug 10 '17 at 04:41
  • Following your tips, I've found out it's due to bootstrap. I'm using bootstrap in parts of my code, specially for the grid system. When I removed bootstrap, the MDL problem was fixed. However, I need bootstrap... How can I use both Bootstrap and MDL, without this conflict (and potentially other ones...) ? – João Otero Aug 10 '17 at 19:18
  • 1
    Hmm... It doesn't surprise me that the two are incompatible. I'd probably look for some material design theme for Bootstrap to accomplish that. A quick Google search found this, but there may be better http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html – Jonathan Aug 10 '17 at 19:45
  • Don't give up on MDL too soon. You can use MDL's [grid](https://getmdl.io/components/index.html#layout-section/grid) – Kostas Siabanis Aug 11 '17 at 08:16
  • Thanks Kostas, I'll try out – João Otero Aug 11 '17 at 18:52
  • Kostas,I gave a (very fast) look in the link, but didn't notice classes for responsiveness, like there is in bootstrap. How does it handle responsiveness? – João Otero Aug 11 '17 at 19:01
  • Sorry for a late reply, SO never notified me, I have provided a full answer with a pen below. Hope it helps. – Kostas Siabanis Aug 12 '17 at 09:12

3 Answers3

1

I did face a similar issue and the fix for it can be found on the below stack overflow thread.

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

likinM
  • 314
  • 3
  • 9
1

MDL grid does not always have 12 columns:

A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size

So, elements with this class:

class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--4-col-phone"

will occupy 4 out of 12 columns in desktop, 2 out of 8 in tablet and 4 out of 4 in a phone. See this example pen.

Kostas Siabanis
  • 2,989
  • 2
  • 20
  • 22
1

You are correct with the problem being conflicting CSS files.

Easiest way to solve this is to change the CSS in your an "Overriding" CSS file (the last one in the "Cascade"). The Class that you want to change is the .mdl-textfield class. The padding-bottom on this class is set to 20px as the start value. You need to change this to 24px to compensate for the additional margins and padding from Bootstrap 3.

So in your "Overriding" CSS File enter :

.mdl-textfield{padding-bottom: 24px;}

This should fix the issue and allow for the CSS/JS of Material Design Lite and Bootstrap 3 to work congruently with the input field.

arandrup5865
  • 48
  • 6