Блог

Недавно я начал изучать разработку интерфейсов с помощью Angular и пытаюсь создать представление («Отчеты свидетелей»), которое будет включать сетку карточек фильтров, которые пользователь может щелкнуть, чтобы отфильтровать истории в зависимости от темы. Я создал компонент отчетов свидетелей, который действует как страница/представление, и компонент фильтров отчетов для карточек. В настоящее время я тестирую представление, вот так

witness-reports.component.html

 <div> <h1>User Reports</h1> <div class="filterGrid">  <app-report-filters></app-report-filters>  <app-report-filters></app-report-filters>  <app-report-filters></app-report-filters>   <app-report-filters></app-report-filters>  <app-report-filters></app-report-filters>  <app-report-filters></app-report-filters>  </div>  

witness-reports.component.html

 .filterGrid { background-color: blue; display: grid; column-gap: 50px; grid-template-columns: repeat(auto-fill, 400px); }   

И шаблон фильтра

report-filters.component.html

 <a class="filterItem">Report Filter</a>  

отчет-фильтры.компонент.css

 .filterItem { background-color: purple; text-align: center;  margin: 20px; padding: 100px; }  

Когда я тестировал его , сохраняя класс filterItem в родительской таблице стилей и используя его в качестве атрибута для детей <app-report-filters class="filterItem"> , дети были правильно расположены, а родитель расширился для размещения. Как только я переместил стиль в дочерний компонент, чтобы сохранить его модульным (я планирую повторно использовать аналогичные фильтры), игра с полями детей приводит к их переполнению и визуализации над родительским элементом (синий блок-родительский <div> элемент).:

Я поискал вокруг и наткнулся на концепцию сокращения полей, но здесь, похоже, это не так. Я также знаю об использовании атрибута переполнения, но это не моя цель. Есть ли способ заставить родителя расширяться? Фильтры будут добавляться динамически из списка категорий.