CODEWITHSUNDEEP
csstwitter-bootstrapmaterial-design-lite
João Otero
João Otero

Reputation: 998

mdl textfield input with focus not aligned, due to conflict with bootstrap

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?

Upvotes: 1

Views: 1198

Answers (3)

arandrup5865
arandrup5865

Reputation: 48

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.

Upvotes: 1

Kostas Siabanis
Kostas Siabanis

Reputation: 3039

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.

Upvotes: 1

likinM
likinM

Reputation: 324

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

Upvotes: 1

Related Questions