MDLテキストフィールドの垂直パディングを減らすまたは削除する

Question

私はMDLテキストフィールドを含むテーブルを持っています。

<table> 
    <tr> 
     <td> 
      Name 
     </td> 
     <td> 
      <div class="mdl-textfield mdl-js-textfield"> 
       <input class="mdl-textfield__input" id="name" type="text"> 
       <label class="mdl-textfield__label" for="name">Name</label> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Name 
     </td> 
     <td> 
      <div class="mdl-textfield mdl-js-textfield"> 
       <input class="mdl-textfield__input" id="age" type="text"> 
       <label class="mdl-textfield__label" for="age">Age</label> 
      </div> 
     </td> 
    </tr> 
</table> 

しかし、これは、テキストフィールド（したがってテーブルセル）に大きな垂直パディングがあるため、非常に醜い結果になります。テキストフィールド自体が29px高いにもかかわらず、セルの高さは69pxです。

テキストフィールドのパディングをCSSで削除しようとしましたが、そのジオメトリが完全に破棄されました。パディングをテーブル行から削除するか、サイズを変更しても何も変わりません。

テキストフィールドを破損することなく、セルまたはテーブルの垂直パディングを削除または大幅に減らす方法はありますか？

EDIT：

私は私の問題を示すペンを作成しました。

mdl-textfield{ 
    padding: 0 
} 

はパディングを削除します。

https://codepen.io/anon/pen/BWRvrz?editors=1100

Answer 1

私は次のスタイルを使用して望んで達成した：パディングは、実際の入力要素が紫色に着色されている一方で、青色の光です。

mdl-textfield__label { 
    top: 4px 
} 

正しい位置にラベルを設定します。正しい位置にアニメーションを移動

mdl-textfield__label:after { 
    bottom: 0 
} 

。

Answer 2

ハッキングと見なされる計算量が少なくて済むソリューションは、埋め込みに等しい負のマージンを使用することです。

.mdl-textfield { 
    margin: -20px 0; 
} 

ここでは、1つのルールのみがオーバーライドされます。

Answer 3

paddingを0pxに設定し、ラベルの位置とアニメーションを固定するより簡単な方法があります。

は、あなたが「MDL-テキストフィールド」と「MDL-textfield__input間の関数に見ればbecouse、この問題を解決するための良い方法ではありません

.mdl-textfield { 
    margin: -20px 0; 
} 

Answer 4

.mdl-textfield { 
    margin: (any number); 
} 

負.mdl-textfieldマージンを設定することができます" "mdl-textfield__input"は、ユーザーが入力フィールドを処理するときに、先頭に表示されます。つまり、 "mdl-textfield"が先頭に表示されます。つまり、マージンを変更するだけで、プレースホルダーのテキストブロックされます。これら2つのdiv、 "mdl-textfield"と "mdl-textfield__input"はjavascript自体で切り替えることができるので、マージンを変更すると、MDLの規則が破られました。