Динамически установить высоту панели расширения мат

Question

Я пытаюсь использовать mat-expansion-panel, однако, в отношении проекта, над которым я работаю, длина заголовка (ов), которую нужно установить на каждой панели, может быть очень длинной и не предсказуемой в большинстве случаев.В настоящее время, если длина текста заголовка слишком велика, он выходит за пределы панели.

Я знаю, что могу настроить свойства [collapsedHeight] и [expandedHeight], чтобы настроить это поведение, однако я пытаюсь найти решение, которое не кодирует значение жестко.

Вот StackBlitz , демонстрирующий то, о чем я говорю.При этом первая панель расширения показывает, что происходит, когда содержимое заголовка слишком длинное, а [collapsedHeight] и [expandedHeight] не установлены.Вторая панель расширения показывает, что происходит, когда я устанавливаю статическое значение - 190px.

Каков наилучший подход для достижения этой цели?

Answer 1

Я сделал небольшое изменение, вы можете увидеть здесь .Позвольте мне объяснить:

Я установил height: 100% !important; в элементе mat-expansion-panel-header.При этом вы говорите этому элементу, что его высота будет установлена ​​всеми дочерними элементами (заголовок, описание и т. Д.).

И я удалил margin: 10%; Лучше использовать вместо этого пиксели.% в margin или padding свойствах css.

Также вы можете сделать заголовок одной строкой и установить многоточие, если оно очень большое, вы можете сделать это, если в заголовке задаетеследующий класс:

.title {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}