When collapsing, the text adapts to the width of the sidebar progressively which causes a jumpy transition
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
add the following CSS class to the text element:
.dont-break {
min-width: 100%;
white-space: nowrap;
overflow: hidden;
}
example https://jsfiddle.net/Lnqpcujm/5/