Конструкция материала расширяемая ширина текстового поля 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>

Обновленный после ответа Брайана

Я хочу этикетки элемент придерживаться правой стороны, и по щелчку расширяться влево.

источник

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%

ответ

Смежные вопросы