2015-12-30 2 views
0

У меня есть следующий угловой компонент материала:Hopping текст в мкр-автозаполнения углового материала

<div flex> 
    <md-autocomplete 
      md-selected-item="selectedSavedList" 
      md-search-text="searchSavedList" 
      md-search-text-change="savedListItemChange(searchText)" 
      md-items="item in querySavedList(searchSavedList)" 
      md-item-text="item.name" 
      md-min-length="0" 
      style="min-width: 300px;" 
      placeholder="hellow"> 
      <md-item-template style="background-color:white;"> 
       <span class="select-title"> 
       <span> {{item.name}} </span> 
      </span> 
      </md-item-template> 
    </md-autocomplete> 
</div> 

Во-первых, когда я наведите мышь на компонент, текст placeholding слегка перемещается вниз. если мышь покидает компонент, текст снова перемещается на свое место. После того, как я нажму, после того, как я выберу элемент, он делает то же самое движение. Я использую компонент почти везде в своем проекте, и их единственная распространенная вещь - это файлы css (таким образом, нет js-issue)

Известно ли это о материале или где-то в моем css, вызывающем его? Если да, то какие части могут влиять на это?

ответ

0

Причиной проблемы было изменение свойства line-height (хотя неясно, осуществляется ли это другой каркас или нет).

Назначение свойства высоты строки входным элементам решает проблему.

например.

md-autocomplete input:not(.md-input) { 
    line-height: 2.42857143; 
} 
0

Хм, работает хорошо для меня. Может быть, его браузер или код раньше? Вы обернули его другими атрибутами flex или layout?

Смежные вопросы