Как установить ширину MDL TextArea

Question

Каков наилучший способ установки ширины многострочного TextField Material Design Lite? Я устанавливаю ширину CSS в пиксельное значение, и он работает, но когда вы нажимаете на него для ввода какого-либо текста, подсветка подчеркивания не распространяется на всю ширину компонента. Я попробовал cols = "80", и это не сработало. Я также попробовал width = "100%", и это не сработало. Я работаю в ReactJS и TypeScript, если это имеет значение.

Answer 1

Ширина должна быть установлена ​​в поле для контейнера mdl-textfield для текстового поля. Например, это работает:

.mdl-textfield{ 
    width:500px; 
} 

Хотя это будет стилизовать все ваши текстовые поля. Если вы хотите, чтобы один из них был таким широким, определите id или класс в том же div, что и класс mdl-textfield, и примените к нему стиль. Например:

<div class="mdl-textfield mdl-js-textfield extrawide"> 
    <input class="mdl-textfield__input" type="text" id="sample1"> 
    <label class="mdl-textfield__label" for="sample1">Text...</label> 
</div> 

с CSS

.extrawide{ 
    width:500px; 
}