liquid-spacer doesn't adjust height

[jlevycpa]

Thanks for the great library! I have a form for adding a response to a piece of content that is hidden most of the time. When the user clicks "Add Response" I want the form to smoothly grow from 0 height. liquid-spacer seems like the easiest way to do this.

When I ran into problems, I simplified to match the example in the docs:

{{#liquid-spacer growDuration=250}}
  {{#if isAddingResponse}}
    {{longMessage}}
  {{else}}
    {{shortMessage}}
  {{/if}}
{{/liquid-spacer}}

When I trigger isAddingResponse = true, the height attribute of the containing DOM node does not change, so the longMessage is cut off due to overflow:hidden. Any idea what could cause this?

[ef4]

Are you using any absolute positioning or floats inside the content that is inside the liquid-spacer? If so you may need to adjust styles so that all the topmost elements actually contain all the content.

To illustrate the problem, consider a simplified example like:

{{#liquid-spacer}}
  <div id="outside">
    <div id="inside" style="position: absolute">My Content</div>
  </div>
{{/liquid-spacer}}

liquid-spacer will measure the size of the outside div, but that height is not effected by anything in inside because inside is absolutely positioned.

[jlevycpa]

Thanks for the quick reply! Right now the content is just a string like the example in the docs. I did some debugging and it looks like the new height is getting calculated correctly, but the height attribute isn't getting updated. Any other thoughts?

[jlevycpa]

Quick update. I'm also seeing the reverse behavior. If I load the template with the section expanded, and then I trigger the {{#if}} block to remove the content, the height of the liquid-spacer does not decrease to fit the now smaller or non-existent content.

Any guidance on what might be causing this would be appreciated.

[jlevycpa]

@ef4 I did some digging and I was able to get this to work by changing this line from target['outer'+capitalize(dimension)] to target[dimension]. It seems like Velocity wants height instead of outerHeight in the properties hash. Does that make sense?

That helped me see that liquid-spacer wasn't really what I wanted. I ended up using {{#liquid-if}} instead.

[ef4]

Thanks, that helps narrow it down.

outerHeight is something we originally patched into velocity, although I think newer versions support it natively now. What version of velocity do you have (npm ls | velocity)?

And yes, liquid-if is probably what you really need in this situation anyway.