I am currently working on creating my own expansion panel using Angular. I want to replicate the behavior of the Angular Material Expansion Panel, but it does not fully meet my requirements.
My custom expansion panel consists of 3 main elements:
- a starting icon
- text
- a collapse/expand button
When I click on the expand icon, the text is displayed. You can view the live code on Stackblitz.
When the panel is collapsed, all three icons are aligned on the same level as shown in the image below:
https://i.sstatic.net/w9Iq0HY8.png
This arrangement is achieved by setting:
align-items: center;
However, when the panel is expanded, the icons also float to the center of the container. Is there a way to keep them fixed at the top while maintaining center alignment when the panel is collapsed?