How to set div to expand with transition on text change

Question

I want to seamlessly expand my div (in a non-jarring way) when the text inside it changes:

The CSS transition: all 2s ease; is working great for colour changes, manually setting width, etc (as you can try out in the jsfiddle - click button to toggle width). but when the inner text of the div is changed the div just jumps to the new width without any transition.

How can I get the transition working when the inner text changes?

Thanks!

Would it be possible to update your JSFiddle so we can see how the div around the text jumps when changing width? — intcreator, Aug 01 '15 at 03:21
As mentioned below...you can't do this with pure CSS. Without a width being set the default initial width is `auto` and the replaced width is still `auto`. Even if the *computed* value of those is different, CSS can't transition to or from `auto`. You need JS. — Paulie_D, Aug 01 '15 at 06:29
Seconded - you should be able to do something simply like this with jQuery just fine. By looks of your JSFiddle, you seem up to the task. **Edit:** Does this [JSFiddle](https://jsfiddle.net/thechrisjordan/3Fc7D/23/) help? I got it from [this question](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css?rq=1). — intcreator, Aug 01 '15 at 15:12
I ended up using a different solution. I don't think this is very clean - but it works fine for what I need: http://codepen.io/anon/pen/WvLOzM — abagshaw, Aug 01 '15 at 19:01

score 3 · Answer 1 · answered Aug 01 '15 at 03:09

3

Because the default width of the div will be auto (100%), it can't transition from auto to a numerical value.

answered Aug 01 '15 at 03:09

Mark Eriksson

1,455
10
19

Ok - but I don't think I'm changing the width to a numerical value. I'm simply adding or taking away text from inside it. I am never setting a pixel value. It just re-sizes by it's self to contain the text. – abagshaw Aug 01 '15 at 03:12
1

Yes but then the browser has to then rerender the div's width, it'll then set in a pixel value – Mark Eriksson Aug 01 '15 at 03:14
Ok - but if I set a default width value the div no longer re-sizes at all. How can I make it re-size with a transition? – abagshaw Aug 01 '15 at 03:15
Try setting a `min-width`, see what that does and report back here – Mark Eriksson Aug 01 '15 at 03:15
Nope - that just goes back to jumpy scaling. No transition. – abagshaw Aug 01 '15 at 03:17

score 3 · Answer 2 · answered Aug 02 '16 at 01:45

I don't think dynamically changing a width of an element depending on its content is possible, as there is no transition for content. The content of an element changes instantly and the width does not get a numerical value in your case - but adjusts.

A solution that can be sometimes applicable: Using a function to roughly calculate your text's width so that you'll be able to set a numerical width for your element on change.

Here's a simple one that I made.

function getTextWidth(text, css) {
    var e = $('<span></span>'); // dummy element
    e.css(css); // set properties
    e.text(text); // set test
    var width = e.appendTo($('body')).width(); // append and get width
    e.remove(); // remove from DOM
    return width;
}

Put together an example of usage.

score 0 · Answer 3 · answered Aug 01 '15 at 12:11

0

Hi abagshaw try this script to solved your problem.

var big = false;

$('#content').on('click', function(e) {
     if(!big)
     {
       
           $( this).animate({
    width: "600px"  }, 500 );
         this.innerHTML = "MORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXT";
         
         big = true;
     }
     else
     {
        $( this).animate({
    width: "200px"  }, 500 );
         this.innerHTML = "LESSTEXTLESSTEXT";
         big = false;
     }
 });

.ui.transitioning.button{
   transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;
    width:200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui transitioning teal button" id="content">LESSTEXTLESSTEXT</div>

answered Aug 01 '15 at 12:11

Mansukh Khandhar

2,542
1
19
29

That does work - but the issue is I might not nessecarily have only two states (maybe three or four) and I can't predict how big the box will be when it expands or shrinks so I need it to be able to do that for me. – abagshaw Aug 01 '15 at 14:37
@abagshaw Means you need multiple div or any element. ? – Mansukh Khandhar Aug 01 '15 at 19:19
Thanks but I ended up solving this on my own. codepen.io/anon/pen/WvLOzM – abagshaw Aug 01 '15 at 19:27
For anyone interested I got it to work without any issues by using an "inner_div" with the text in consideration and auto width. Have the outer width initially fixed and not auto. Then upon a click calculate the necessary width in JS with new_width = document.getElementById('inner_div').offsetWidth. JS style your outer div bar with the new_width variable that you obtained. I'd normally post the solution here, but I used my code for a complex toolbox div within an interactive SVG with added complexities. If anyone upvotes this I will post the solution. – CodeTrek Jan 06 '23 at 20:29

How to set div to expand with transition on text change

3 Answers3