As the sidebar collapses, the text adjusts to its width in a choppy transition
I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines
I want the text to appear only after the collapse transition is complete
Here's what I've attempted:
-Adjusting the transition time (too abrupt and removing the transition makes it too sudden)
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 290px;
background: #193D4C;
z-index: 100;
transition: all 0.5s ease;
}
-Using the backface-visibility property. No success.
-Trying 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 scoured for similar inquiries but haven't found a solution yet