材料设计可扩展文本字段宽度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％

回答

相关问题