素材デザイン拡張可能なテキストフィールド幅100％

md-textfieldを全幅outer-table要素に展開しようとしています。しかし、width: 100%を設定すると正しく拡大されません。その部分は画面の右側に属し、サイズにはいくつかの問題があります。私はouter-table正確な幅を与えていない、それはデバイスに応じて変更する必要がありますので。誰かが私が間違っていることについて私にヒントを与えてもらえますか、ここで私が今やったことはありますか？ブライアンの答え素材デザイン拡張可能なテキストフィールド幅100％

後に更新し

.outer-table { 
 
    width: 100% 
 
} 
 

 
.table-header { 
 
    position: relative; 
 
    left: 9px; 
 
    bottom: 3px; 
 
    width: 100%; 
 
} 
 

 
.table-header div.mdl-textfield { 
 
    position: absolute; 
 
    right: 10px; 
 
    z-index: 9999; 
 
    width: auto; 
 
} 
 

 
.full-width { 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>mdl textarea</title> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="outer-table"> 
 
    <div class="table-header"> 
 
     <div class="mdl-textfield mdl-js-textfield full-width"> 
 
     <label class="mdl-button mdl-js-button mdl-button--icon" for="expando1"> 
 
      <i class="material-icons">search</i> 
 
     </label> 
 
     <div class="mdl-textfield__expandable-holder full-width"> 
 
      <input class="mdl-textfield__input full-width" type="text" id="expando1"> 
 
      <label class="mdl-textfield__label" for="expando1">Expandable text field</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

私は、label要素が右側に固執し、左側に拡大クリックします。

出典

2016-07-05 renchan

私は何をお使いの提示わかりません。あなたのデモのように、あなたが望むようにすべてが機能するように見えますか？あなたのために他に何が欠けていますか？ – Thatkookooguy

変更し、このCSS：このCSSに

.table-header div.mdl-textfield { 
    position: absolute; 
    right: 10px; 
    z-index: 9999; 
    width: auto; 
}

：

.table-header div.mdl-textfield { 
     position: absolute; 
     right: 10px; 
     z-index: 9999; 
     width: 100%; 
    }

出典

2016-07-05 15:49:46 Brian

この場合、ラベルは左側に付いていますが、右側にあるようにしたいと思います。 – renchan

素材デザイン拡張可能なテキストフィールド幅100％

答えて

関連する問題