材料設計可擴展文本字段寬度100％

我試圖在outer-table元素的全寬上擴展md-textfield。但是，當我設置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>

布賴恩的答案後更新

我想標籤元素貼在右側，點擊後展開左側。

來源

2016-07-05 renchan

我不知道你的要價。它看起來像你的演示中一切正常，你想要的，不是嗎？你還缺少什麼？ – Thatkookooguy

更改這個CSS：

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

爲了這個CSS：

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

來源

2016-07-05 15:49:46 Brian

在這種情況下，標籤貼在左側，但我希望它在右側。 – renchan

材料設計可擴展文本字段寬度100％

回答

相關問題