如何使输入区域适合角度文字？

Question

I'd like to have an input area to fit text that is inside of it.

My code:

<mat-card>
  <fieldset>
    <legend>qwerty</legend>
    <div>
      <div>
        <label>Qwerty Asdf</label>
        <mat-form-field>
          <input matInput disabled="true" name="type" value="qwerty" />
        </mat-form-field>
      </div>
      <div>
        <label>Foo Bar</label>
        <mat-form-field>
          <input matInput disabled="false" name="type" value="baz" />
        </mat-form-field>
      </div>
      <div>
        <label>E Makarena</label>
        <mat-form-field>
          <input matInput disabled="false" name="type" value="asdsadsadsadsadsaadsad" />
        </mat-form-field>
      </div>
    </div>
  </fieldset>
</mat-card>

The result of above code is:

I tried setting width of input to auto or 100% or fit-content but that doesn't change a thing.

Answer 1

Try directive matTextareaAutosize mentioned in https://material.angular.io/components/input/api

That should be exaxtly what you are looking for.

It can not be done using CSS alone, because CSS is not aware of user typing. It has to be done via Javascript.

If you are only interested in "increasing the width" of input field by pure CSS, then you can do it like this:

• make the input field really wide
• set CSS style to underline the typed text (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration )
• that should create similar effect to "auto-expand", but it might be inconsistent with Material design