在 angular material 的 md-autocomplete 中跳转文本

Question

我有以下 angular material 组件：

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

首先，当我将鼠标悬停在组件上时，占位符文本会稍微移动到底部。如果鼠标离开组件，文本将再次移动到它自己的位置。在我点击之后，在我 select 一个项目之后，它做完全相同的动作。我在我的项目中几乎无处不在使用该组件，它们唯一常见的是 css 文件（因此没有 js 问题）

它是 material 的已知问题还是我的 css 中的某个地方导致了它？如果是这样，哪些部分会对此产生影响？

Answer 1

嗯，很适合我。也许是浏览器或之前的代码？你有没有用其他 flex 或布局属性包装它？

Answer 2

问题的原因是变化line-height 属性（虽然不清楚是否受其他框架影响）。

将 line-height 属性分配给输入元素即可解决问题。

例如

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

在 angular material 的 md-autocomplete 中跳转文本

Hopping text in md-autocomplete of angular material

javascript

css

angularjs

angular-material