2016-04-23 17 views
2

現在選択リストでangular materialを使用していますが、選択時にラベルアニメーションを必要としません。一度選択すると、選択入力の上に常に表示されるラベルが表示されます。角度素材選択リストのアニメーションを防止する

私はこれは通常のテキスト入力

<md-input-container class="md-input-has-placeholder"> 
     <label>Name</label> 
     <input type="text"/> 
    </md-input-container> 

enter image description here

での作業を取得することができますしかし、これはselect lists(選択リスト用の角材料のドキュメントへのリンク)のために働くありません。私はwhat is happeningラベルをセレクト入力の上に固定したままにすることはできません。

これが私の現在のコード

<md-input-container flex="auto" flex="50" class="md-hue-3 md-input-has-placeholder"> 

<label>What is happening ?</label> 

<md-select ng-model="$ctrl.alert.effect" class="md-hue-3 ng-not-empty" name="what"> 
    <md-optgroup label="Select type"> 
      <md-option ng-repeat="effect in $ctrl.effects">{{effect.name}}</md-option> 
    </md-optgroup> 
    </md-select> 
</md-input-container> 

アニメーションはクールですべてですが、私は普通の入力ラベルをしたいです。


これは、アクティブな入力のためにSASSで親セレクタを書く必要私は仕事に作るために作成したハック..残念ながら、そこにあるので、簡単な

<div layout="row"> 
    <div layout="column" layout-fill> 

     <label>What is happening ?</label> 

      <md-input-container flex="auto" flex="50" class="md-hue-3"> 

        <md-select ng-model="$ctrl.alert.effect" class="md-hue-3" name="what" > 
         <md-optgroup label="Select alert type"> 
          <md-option ng-repeat="effect in $ctrl.effects">{{effect.name}}</md-option> 
         </md-optgroup> 
        </md-select> 

       </md-input-container> 
     </div> 
    </div> 

答えて

0

何かのためにその混乱ですこのオプションとしてこれを行う簡単な方法はサポートされていません。 this bugと(私は右のあなたを得た場合)

をそれを行うための簡単な方法がありますthis post

1

を参照してくださいあなたはラベルのアニメーションを無効にしたい場合は、ちょうどあなたのCSSに以下を追加:

md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child { 
    -webkit-transform: none; 
    transform: none; 
} 
関連する問題