mui / mui/material-ui

[Collapse] Support anchoring content to the bottom/right

Open
#43,393 1 comment 1 reaction 1 assignee View on GitHub

Nobody has claimed this yet.

component: Collapse has workaround scope: transitions type: enhancement waiting for 👍
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Summary

Would like to be able to anchor the collapsed content to the bottom of to container. The effect can be achieved by adding following styles to the Collapse but it would be nice to have a prop that can handle this:

sx={{
  display: "flex",
  flexDirection: "column-reverse",
}}

Perhaps the direction prop can even be expanded to account for this use-case. If not accepted, perhaps this use-case could be added to the docs?

Examples

Here's a codesandbox that displays the desired behavior: https://codesandbox.io/p/sandbox/lucid-heyrovsky-wrjrnp?file=%2Fsrc%2FDemo.tsx%3A47%2C45

https://github.com/user-attachments/assets/9e8f89dc-5d60-4ee6-80f0-ddd286fe6a8a

Motivation

I struggled a bit with this when building Toolpad component catalog, which feels better when it looks like the drawer is pulled from under the left edge, rather than it being already in place and revealed gradually. Now I'm running into it again with another component.

https://github.com/user-attachments/assets/0398c9c8-7fb3-42df-a94f-ecd53b223b31

vs.

https://github.com/user-attachments/assets/5aa03937-8810-4541-b021-af2caea3d114

Search keywords: collapse reverse

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.