(solved) How to check if text will overflow ? Mainly timing

help
1

Hi,

we have description field with set width and height.
In case it would overflow we need to show Expand button. How to check if dynamic text would overflow?

I found few ways how to do actual test and that consist of copying element, attaching it to and checking if height of this new one is bigger than original one.
But that expect we know WHEN to execute this check.

And that is kinda problem for me to determine as it is dynamic content.
So any kind of onRendered template does not cover it as long as I know.
Timeout schedule (inside text generating helper) sounds quite bad. But for me it seems as the only option I can think of right now.

2

Ok, so data context of template seems to be already in DOM during onRendered.
I am able to do this simple check for our multiline check

Template.testText.onRendered ->
  console.log 'onRendered output: '
  console.log @.$('.test-text').html()
  $element = @$('.test-text')
  $c = $element
      .clone()
      .css({height: 'auto', visibility: 'hidden'})
      .appendTo('body')

  console.log 'original height:'+$element.height()
  console.log 'clone height:'+$c.height()
  
  $c.remove()

some css

.test-text {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

and template itself

<template name="testText">
  <div class="test-text">
    {{{this}}}
  </div>
</template>