• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

118
Views
Jumpy CSS transition in sidebar links text while toggle transition is running

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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/

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error