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

Я так новичок в 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 может быть тем, что мне нужно, но пока я не могу заставить его работать правильно.


javascript angular angular-material angular-flex-layout
person kroe761    schedule 20.05.2019    source источник
comment
Вы пробовали атрибут size?   -  person asimhashmi    schedule 20.05.2019
comment
под «дольше» вы имеете в виду визуально дольше?   -  person Saksham    schedule 20.05.2019
comment
Да, визуально. Мне нравится идея flexlayout, но я не могу заставить ее работать. Я бы хотел иметь возможность просто установить поле, занимающее определенный процент экрана, и пусть это будет так.   -  person kroe761    schedule 20.05.2019

Ответы (5)


arrow_upward
32
arrow_downward

Это изменит ширину поля матовой формы.

<mat-form-field [style.width.px]=327>
  <input matInput placeholder="Template Name" value="{{templateName}}">
</mat-form-field>
person Shubh    schedule 11.01.2020
comment
Есть ли способ, кроме изменения ширины, изменить и высоту? - person Dwayne; 07.04.2020
comment
В зависимости от того, чего вы хотите достичь, вы можете установить атрибут style.height, как указано выше, и это даст больше места внизу для текста подсказки поля, но не изменит само поле. вы можете попытаться назначить высоту различным содержащимся элементам (например, <input ›), чтобы получить разные эффекты, но, может быть, вы просто хотите установить разные метрики шрифта? попробуйте установить line-height. - person Guss; 20.07.2021

arrow_upward
4
arrow_downward

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

<mat-form-field style="width:50vw" ...>
   ...
</mat-form-field>
person Marshal    schedule 20.05.2019

arrow_upward
2
arrow_downward

Используя fxLayout, вы можете создать гибкий бокс. Чтобы каждый элемент в 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>

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

person samin    schedule 14.06.2019

arrow_upward
1
arrow_downward

вы можете использовать эти трюки css


.mat-form-field{
   width:350px !important;
}
person Jessy Ndaya    schedule 25.09.2020

arrow_upward
0
arrow_downward

Принуждение стилей должно помочь, поскольку

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

OR 

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

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

person Saksham    schedule 20.05.2019