Установить ширину во входных полях mat-form для углового материала

Question

Я очень новичок в Angular, и я пытаюсь создать форму с полями ввода длиннее, чем по умолчанию.Это мой текущий код:

person.component.html

<form class="new-person-form">
    <mat-card>
        <mat-form-field>
            <input matInput placeholder="Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday">
        </mat-form-field>
        <mat-checkbox>Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

person.component.html

<form class="new-person-form">
    <mat-card fxLayout="row">
        <mat-form-field>
            <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

И вот результат:

|                                                                          |
|   Name___________  Birthday_______  [] Active                            |
|                                                                          |

Я пытаюсь удлинить Name до 50% страницы, поэтому что-токак это:

|                                                                          |
|   Name___________________________  Birthday_______  [] Active            |
|                                                                          |

Я не очень хорош в CSS, поэтому я думаю, что FlexLayout может быть тем, что мне нужно, но пока я не могу заставить его работать правильно.

Answer 1

Используя fxLayout, вы можете создать flexbox. Чтобы каждый элемент во flexbox занимал полную строку, вы должны использовать fxFlexFill. Для создания элемента, занимающего оставшееся пространство, вы можете использовать fxFlex.

Вы также можете использовать fxLayoutGap вместо заполнения в стилях. Также, если вы хотите, чтобы элементы переходили на следующую строку, когда места больше нет, вы можете использовать fxLayout = "row wrap".

Вот несколько примеров того, что вы искали:

    <form class="new-person-form">
        <h3>full Rows:</h3>
        <mat-card fxLayout="row wrap">
            <mat-form-field fxFlexFill>
                <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field fxFlexFill>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-25-25:(checkbox consumes same space as Birthday)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex="25">
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-remaining-required:(Birthday consumes remaining space)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex>
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox>Active</mat-checkbox>
      </mat-card>
    </form>

Я также создал рабочий пример в стеке блиц .

Answer 2

Форсирование стилей должно сделать трюк как

.mat-input-wrapper{
  width:400px !important;
}

ИЛИ

<mat-form-field style="width:400px !important" ...>
   ...
</mat-form-field>

Попробуйте добавить класс, если вы хотите обрабатывать не все поля ввода на странице.

Answer 3

Следующее сделает поле 50% из Viewport Width с помощью style="width:50vw"

<mat-form-field style="width:50vw" ...>
   ...
</mat-form-field>

Answer 4

Вы можете использовать документацию к своему материалу, просто поставьте размер col.Прочитайте это, чтобы понять: https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins