Wix Repeater item auto width

Ask the community
,
6

Right, there is quite a variation in title lengths in your screenshot.

I made the code work in a vertically-stacked repeater of quotes of varying length. In the unlikely event a person was looking to have all the repeater rows be of the same height, more or less, this code would do it.

The idea with this is to get the html of the text element, determine the size of the quote, and then replace the html of it after having constructed a suitable replace statement with the new font size. As you would expect, there was quite a bit of trial and error involved with this, and the formula that would work with a much smaller piece of text may be quite different.

$w.onReady(function () {
    $w("#repeaterQuotes").onItemReady(($item, itemData, index) => {
      $item("#txtQuote").text = itemData.quote;
      let chars = itemData.quote.length;
      let htmlContents = $item('#txtQuote').html;
      //console.log(htmlContents);
      let charsDiff = 444 - chars; // 394 is the median quote length
      let fontChange = Math.ceil(charsDiff / 60);
      let AdjustedFontSize = 18 + fontChange;
      let ReplaceString = "font-size:" + AdjustedFontSize.toString().trim() + "px";
      let AdjustedHtmlContents = htmlContents.replace(/font-size:18px/g, ReplaceString);
        $item('#txtQuote').html = AdjustedHtmlContents;
    });
});