t.sizeTo(arg)

You'll almost always need a way to tell Trello that the size of the content in one of your iframes has changed, or maybe doesn't perfectly line up with the height you requested when instantiating the iframe.

For those moments, you can use t.sizeTo(arg)

t.sizeTo takes a single argument which can by any of the following:

Type	Description	Example
`string`	A DOM query selector that will select the node to measure and use the height of	`t.sizeTo('#content')`
`element`	A DOM element that will be measured and we will use the height of	`t.sizeTo(document.body)`
`number`	A positive number that will be used directly for the height	`t.sizeTo(625)`

To get an understanding of how this is used lets look at an attachment-section example:

1
2
window.TrelloPowerUp.initialize({
  'attachment-sections': function(t, options){
    // options.entries is a list of the attachments for this card
    // you can look through them and 'claim' any that you want to
    // include in your section.

    // we will just claim urls for Yellowstone
    var claimed = options.entries.filter(function(attachment){
      return attachment.url.indexOf('http://www.nps.gov/yell/') === 0;
    });

    if(claimed && claimed.length > 0){
      return [{
        claimed: claimed,
        icon: HYPERDEV_ICON,
        title: 'Example Attachment Section: Yellowstone',
        content: {
          type: 'iframe',
          url: t.signUrl('./section.html'),
          height: 230
        }
      }];
    } else {
      return [];
    }
  }

Let's look at ./section.html

1
2
<html>
  <head>
    <link rel="stylesheet" href="https://p.trellocdn.com/power-up.min.css">
    <script src="https://p.trellocdn.com/power-up.min.js"></script>
  </head>
  <body>
    <div id="content">
      <p>Tips for using attachment-sections</p>
      <ol>
        <li>Make sure your section feels at home on the card. It should fit in with the rest of the card and not stick out.</li>
        <li>You can specify a height when you claim the section, and also use t.sizeTo() to make sure your section is the perfect height.</li>
        <li>Try to keep the height of your sections to a minimum.</li>
        <li>It should be obvious to the user what attachments went into your section. They shouldn't be left wondering were one of their attachments disappeared to.</li>
      </ol>
      <p class="u-quiet">Claimed attachment urls: <span id="urls"></span></p>
    </div>
    <script src="./js/section.js"></script>
  </body>
</html>

Lastly, let's look at ./js/section.js:

1
2
var t = window.TrelloPowerUp.iframe();

t.render(function(){
  // make sure your rendering logic lives here, since we will
  // recall this method as the user adds and removes attachments
  // from your section
  t.card('attachments')
  .get('attachments')
  .filter(function(attachment){
    return attachment.url.indexOf('http://www.nps.gov/yell/') == 0;
  })
  .then(function(yellowstoneAttachments){
    var urls = yellowstoneAttachments.map(function(a){ return a.url; });
    document.getElementById('urls').textContent = urls.join(', ');
  })
  .then(function(){
    return t.sizeTo('#content'); // 👈
  });
});

As you can see, once we have rendered out our section, the last thing we do is call t.sizeTo('#content') to make sure that our section iframe isn't showing as an awkward height and is "just right".