I am trying to use a mat-expansion-panel, however, with regards to the project I am working on the length of the title(s) I need to set on each panel could be very long and not predictable in most cases. Currently, if the length of the title text is too long then it goes out of the panel's bounds.

I know that I can set [collapsedHeight] and [expandedHeight] properties to adjust this behavior, however, I am trying to look for a solution that does not hard-code a value.

Here's a StackBlitz demonstrating what I am talking about. In that, the first expansion panel shows what happens when the title content is too long and [collapsedHeight] and [expandedHeight] is not set. The second expansion panel shows what happens when I set it to a static value - 190px.

What would be the best approach to achieve this?

I am trying to use a mat-expansion-panel, however, with regards to the project I am working on the length of the title(s) I need to set on each panel could be very long and not predictable in most cases. Currently, if the length of the title text is too long then it goes out of the panel's bounds.

I know that I can set [collapsedHeight] and [expandedHeight] properties to adjust this behavior, however, I am trying to look for a solution that does not hard-code a value.

Here's a StackBlitz demonstrating what I am talking about. In that, the first expansion panel shows what happens when the title content is too long and [collapsedHeight] and [expandedHeight] is not set. The second expansion panel shows what happens when I set it to a static value - 190px.

What would be the best approach to achieve this?

• javascript
• css
• angular
• angular-material

• 1 Take a look to those changes I made, are you asking by this way?: stackblitz./edit/angular-ky9h9f-tktbvj – Kalamarico Commented Oct 25, 2018 at 22:21
• 1 Yes, thank you. That was it. – cyberbeast Commented Oct 25, 2018 at 22:23

1 Answer 1

I did a little change, you can see here. Let me explain:

I have set the height: 100% !important; in the mat-expansion-panel-header element. With that you are telling to that element that its height will be set by all the childs it has inside (title, description, etc).

And I have deleted the margin: 10%; It's better if you use pixels instead of % in margin or padding css properties.

Also you can make the title in one single line and set a ellipsis if it is very large, you can do that if you set in the title the next class:

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