Material Design Lite — нижняя строка в текстовом поле имеет небольшой разрыв с цветной линией

Я пытаюсь заставить текстовое поле Material Design Lite работать, и у меня есть проблема, когда нижняя цветная линия имеет небольшой зазор в 3-4 пикселя между серой начальной линией. Любой пример текстового поля MDL, который я подключаю к своей странице, я получаю тот же результат, что может локально вызывать проблему? Также я использую react.js на внешнем интерфейсе.

У меня 1.2.1 Material Design Lite.

Вот изображение: введите здесь описание изображения

Вот мой код:

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

javascript material-ui material-design-lite
person freeBeerTomorrow    schedule 16.09.2016    source источник
comment
Можете ли вы поделиться рабочим примером? скрипка или ручка?   -  person Pranesh Ravi    schedule 16.09.2016
comment
Любые примеры, которые я использую из: getmdl.io/components/#textfields-section. такой же разрыв при добавлении в мой код. Но они прекрасно отображаются в Интернете.   -  person freeBeerTomorrow    schedule 16.09.2016
comment
Как сказал @PraneshRavi, не видя вашего реализованного кода, мы не сможем помочь.   -  person link2pk    schedule 16.09.2016
comment
Попробуйте реализовать как jsfiddle.net/link2pk/4t662wdk   -  person link2pk    schedule 16.09.2016
comment
У меня такая же проблема. Я использую componentHandler.upgradeDom(), потому что html добавляется динамически. Проблема как в IE, так и в Chrome. Ставим дно: 15px на mdl-textfield__label: после устранения проблемы (ВЗЛОМ).   -  person Stephane    schedule 17.09.2016
comment
Я проверил, что updateDom() вызывается при загрузке страницы. Я замечаю аналогичную проблему с моим mdl spinner. Он показывает загрузку... вместо анимации вращения, что также похоже на ту же проблему. Любой совет?   -  person freeBeerTomorrow    schedule 18.09.2016

Ответы (1)


arrow_upward
6
arrow_downward

Я столкнулся с той же проблемой с MDL при использовании с boostrap, и оказалось, что файл css boostrap добавляет отступ в 5 пикселей внизу для элемента Label, который создает разрыв в 5 пикселей.

JSFiddle — воссоздание проблемы

Фрагмент кода из файла Bootstrap.css

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

Исправить можно было бы уменьшить нижнее поле элемента метки до 0 пикселей.

Fix-JsFiddle

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

Надеюсь это поможет.

person Nikil Mathew    schedule 13.10.2016
comment
MDL + Bootstrap, теперь это имеет для меня смысл, спасибо - person Nandha Frost; 07.12.2020