Add horizontal collapse support #34253
Conversation
|
As |
|
I think since folks may have been using this already (in both v4 and v5), we're stuck with |
|
From what I can see, |
|
These lines are what makes Line 54 in 2b2183a Lines 268 to 270 in 2b2183a Switching to any other class would require changing some JS. Arguably no one should be using |
|
cough #31681 (comment) Not sure if I should feel ignored.. :P |
Lol, nooo, I feel so bad. Sorry for not seeing that! 😅 |
|
Renamed the class from Note that if we want to backport this to v4, we'd likely have to use |
| @@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil | |||
| </div> | |||
| {{< /example >}} | |||
|
|
|||
| ## Horizontal | |||
|
|
|||
| The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. | |||
There was a problem hiding this comment.
Maybe promote our width utilities here, and a link to how-to add utilities?
| The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. | ||
|
|
||
| {{< callout info >}} | ||
| Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** |
There was a problem hiding this comment.
Just wondering if contains and will-change could help here? Can't play with this right now, but something to keep in mind for improving v5 regarding repaint / reflow and animation.
Thanks @vanillajonathan for the demo at #17496!
This PR finally implements this longstanding request for a horizontal collapse. We already have the JS support, so we were missing the CSS for
.width.collapsingand a child element with a fixed width.Fixes #17496.
Preview: https://deploy-preview-34253--twbs-bootstrap.netlify.app/docs/5.0/components/collapse/#horizontal