Угловой указатель даты материала не размещает элементы в одной строке

В моем веб-приложении я использую средство выбора даты углового материала. Проблема в том, что он не показывает все элементы подряд. Это мой взгляд:

Выбор даты

Чтобы мой настраиваемый css не влиял на представление, я удалил все настраиваемые стили.

Таким образом, мой html очень прост. Я просто скопировал и вставил пример углового материала с официального портала angular (базовый элемент выбора даты):

<mat-form-field appearance = "fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker] = "picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for] = "picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Но в соответствии с примером материала angular в режиме онлайн изображение должно быть примерно таким: Basi datepicker из углового материала онлайн-помощь

В чем я не прав?

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
1
0
254
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Попробуйте использовать matSuffix вместо matIconSuffix в своем mat-datepicker-toggle.

Изменить после комментария @TotallyNewb.

Угловая версия <= v14: matSuffix

Угловая версия >= v15: matIconSuffix

В качестве примечания - это одно из многих изменений между основными версиями (14 против 15). Поэтому убедитесь, что вы читаете документы для правильной версии, так как for вещи имеют тенденцию меняться.

TotallyNewb 18.11.2022 13:59

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