how to make the material UI expansion panels open upwards when expanded instead expanding downwards?

≡放荡痞女 提交于 2020-06-23 08:12:03

问题


Problem:

  • Upon expanding expansion-panel, it should expand upwards to show more info rather than expanding down which makes user to scroll down again.

回答1:


If you are using Angular Material Component's Expansion Panel,
then you can use the following css for making the expansion-panel content to be present above the mat-expansion-panel-header in styles.css file.

.mat-expansion-panel {
  display: flex !important;
  flex-direction: column;
}
.mat-expansion-panel-header {
  order: 2;
}

StackBlitz - Angular Material Demo

Update 1 : React's Material UI Demo




回答2:


If you dont mind panel moving header upwards after expantion, you could dock whole expansion panel / accordeon to bottom and use absolute positioning.

https://stackblitz.com/edit/angular-b11huf?embed=1&file=app/expansion-overview-example.css

However keep in mind that panel title, header and description order is important for correct displaying expansion panel and displaying just header at the bottom all the times is going to be painfull. Good Luck.



来源:https://stackoverflow.com/questions/51312373/how-to-make-the-material-ui-expansion-panels-open-upwards-when-expanded-instead

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!