CODEWITHSUNDEEP
angular-material
iPhoneJavaDev
iPhoneJavaDev

Reputation: 825

Scroll panel to top most of the screen when expanded

I have the following example. When I expand the panel, the remaining items below it goes down to make room for the content of the opened panel.

enter image description here However, what I need is, when I expand the panel, it should scroll upwards so the header of the opened panel is on top. Reason being is that, I am planning to make the content height to occupy as much height as possibly available in the screen, making the opened panel almost occupy most of the screen.

enter image description here

Upvotes: 1

Views: 3620

Answers (1)

Abhishek Kumar
Abhishek Kumar

Reputation: 2539

For Angular Material Component's Expansion Panel,
you can use the following css for making the expanded expansion-panel to be present above all,
ie the expanded expansion panel will move to the first position in the list.

--------- styles.css ---------.

.mat-expansion-panel,
.mat-accordion {
  display: flex !important;
  flex-direction: column;
}
.mat-expansion-panel.mat-expanded {
  order: -1;
}


Approach :

  • Give .mat-accordion, display: flex and manipulate order property on the expanded expansion-panel to achieve the goal.

Stackblitz- Demo showing expaned panel moving to top in the list

Upvotes: 2

Related Questions