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

Question

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

1

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

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

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

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

cyberbeast 25 окт. 2018, в 23:53

Источник

1

Посмотрите на те изменения, которые я сделал, вы спрашиваете таким образом?: Stackblitz.com/edit/angular-ky9h9f-tktbvj
Kalamarico 25 окт. 2018, в 22:21
1

Да спасибо. Вот и все.
cyberbeast 25 окт. 2018, в 22:23

Теги:

angular

javascript

css

angular-material

1 ответ

Ещё вопросы

Посмотрите на те изменения, которые я сделал, вы спрашиваете таким образом?: Stackblitz.com/edit/angular-ky9h9f-tktbvj

Kalamarico · Accepted Answer · 2018-10-25T20-03-00.000Z

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

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

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

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

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

Спасибо. Ценю помощь и объяснение. :)