Макет формы прерывается, если поле mat-form-field находится в компоненте

Если я использую поля mat-form-fields непосредственно в форме, поля отображаются в виде «столбца», как показано ниже.

<h1>Form 1</h1>
<form class = "example-form">
  <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
</form>

однако, если поля формы mat перемещаются в компонент angular, поля отображаются в виде строки

<h1>Form 2</h1>
<form class = "example-form1">
  <input-field></input-field>
  <input-field></input-field>
  <input-field></input-field>
  <input-field></input-field>
</form>

где шаблон компонента поля ввода определяется следующим образом:

<mat-form-field >
  <input matInput  placeholder='Name' value = "world" readonly='true'>
</mat-form-field>

и это конечный результат. Form1 (без угловой компоненты) и Form 2 (угловые компоненты полей)

Макет формы прерывается, если поле mat-form-field находится в компоненте

https://stackblitz.com/edit/angular-b3rxbf?embed=1&file=app/input-field.html

Нужно ли что-то изменить в CSS моего компонента?

В дополнение к ответу, опубликованному Сергом, вы можете изменить значение стиля input-field вашего компонента display с inline по умолчанию на inline-block, чтобы оно соответствовало mat-form-field. Это может помочь сделать его поведение более согласованным с mat-form-field.

G. Tranter 13.09.2018 16:01
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
1 742
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашей первой форме есть max-width: 500px;, что заставляет вводить данные в оболочку. Вторая форма занимает все доступное пространство, которого достаточно для того, чтобы все поля поместились в одну строку.

Другие вопросы по теме