When collapsing, the text adapts to the width of the sidebar progressively which causes a jumpy transition
Example:
As you can see the text Collapse sidebar
appears in two lines instead of a single line of text.
Desired result:
I would like to know if there is any mechanism to show the text only when it fits 100% in the sidebar and it is not cut in two lines.
I need is the text to appear only after the transition of the collapse has finished.
What I’ve tried:
-Increasing/decreasing the transition time (too radical, works if I delete the transition but somehow has to be smooth so it’s not a valid solution)
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 290px;
background: #193D4C;
z-index: 100;
transition: all 0.5s ease;
}
-Using backface-visibility
property. Did not work.
-Using Bootstrap 5 event type shown.bs.collapse
like this:
var myCollapsible = document.getElementById('sidebar')
myCollapsible.addEventListener('shown.bs.collapse', function () {
alert("it works!"); //This never gets fired
})
I’ve been looking for a similar question for a long time but I didn’t find anything