Horizontal collapse

[vanillajonathan]

It would be nice with a horizontal collapse feature.

This would be very handy for collapsing sidebars.

[TheBuzzer67]

Offset Canvas already do it!? But we have to use a bit jquery to exchange collapse for canvas!

[WebDragon]

one would also like the option to have a slide-(left|right) nav on tablet and mobile, that overlays the content rather than pushing it aside.

[viktorsmari]

What is the status of this?
I am waiting for the option to slide a nav menu from the sides, which appears to be the standard today on mobile apps.

[WebDragon]

https://github.com/bootstrapstudio/bootstrap-better-nav so this is a thing that exists and which I've used successfully in a redesign.

[stormriderstudios]

Any chance of an update on this?
I can see that it's in the Feature Ideas of the Bootstrap 5 project but currently unassigned.
I would be hugely keen the see this feature added, especially if it has support for partial and total collapse (whether through collapsing child elements or some similar mechanism or directly in the feature).
I envisage it being able to completely collapse something to the side, collapse to the side and expand other elements on the same horizontal plane (which I realise is more difficult than vertical collapse) or the popular option to collapse a text menu to icons only.
Cheers!

[mdo]

#31285 is planned for off canvas, and #31681 is stubbed out but troublesome for horizontal collapse.

[vanillajonathan]

@mdo, it looks really good! 👍

[mrlife]

This is a really good example of left nav/sidebar that hides on smaller screens and has an icon only collapse option on larger screens.

https://coreui.io/demo/3.1.0/#main.html

[iainhallam]

https://coreui.io/demo/3.1.0/#main.html

@mrlife's example of a sidebar that collapses to an icon bar is exactly why I came looking for a horizontal collapse 😄

[mdo]

Tried in #31681 but couldn't make it work with just CSS. Would love if someone could give it a go!

[iainhallam]

Thanks for trying! Unfortunately I'm pretty rusty on CSS; more of a back-ender now.

[vanillajonathan]

I thought this would be just as the existing vertical collapse but horizontal and hence be a minor change that was easy.

[lvampa]

I have a use case for this functionality that I just finished implementing and I thought I'd circle back to see what value I can bring to this issue!

The Problem

From what I understand, during the expanding of the collapse element, the height is set to 0, overflow is set to hidden, the scrollHeight of the element is calculated, and then set on the element. This causes the transition to happen. The key is that the child element is hidden by the overflow, but still visible, which allows the scrollHeight calculation to capture it's height. Here is a screenshot of the height that is being captured -

The JavaScript already has support for adding a width class to the collapse element. This switches the JavaScript calculation from scrollHeight to scrollWidth. However, there is no support for the width class in the CSS so some small finagling needs to happen to the styles of the .collapsing class. This is not enough however, because the child element doesn't expand horizontally the same way it did vertically (I believe this is just because of how the DOM is rendered?) and the scrollWidth calculation doesn't capture the full element width. Here is the hidden overflow that scrollWidth captures. Not having the proper width means that the transition doesn't properly go from 0 to full width and ends up jumping around.

Solution

To solve this problem while still using the collapse functionality, I set a fixed width on the child element. This way, the scrollWidth calculation captures the proper width of the visible collapse element and the transition happens smoothly. I created a pen -

https://codepen.io/SpaceJam/pen/wvJQBPB

The pros here are that I could use the existing JS, and only need to make a few small styling changes to support the functionality I needed. The con is that this isn't responsive. It would be simple enough to add some responsive variables to change the collapse width at different screen sizes -

$collapse-horizontal-width-sm: ...
$collapse-horizontal-width-md: ...
...

In my mind, this is still less than a perfect option. From what I can see above, others have settled on this same fixed-width solution, but that didn't give traction to getting this issue resolved. I'm happy to open a PR (it would probably look similar to #31681) to support this solution if you all feel this adequately fulfills the issue request.