Wix Repeater item auto width

Ask the community
,
1

Hi everyone,

Is there a way (via settings or code) to make items in a repeater to auto expand their width to fit text contents ? Right now, if a text is too long, it just go to next line and expand the height.

Something like chip component How To Create Contact Chips

2

@forrest1001 I’m not entirely sure from your post and the chip component reference what you’re trying to do.

What your post did remind me of was something that I did for a web site that has a quote for each day of the year of varying lengths that needs to display in a limited area. What I did to solve the dilemma was to increase or decrease the font size with code depending on the length of the quote. If your goal is for each repeater row to have the same height irrespective of the length of the text contents, this approach would work.

3

@tony-brunsman Thanks. Here’s a screenshot of what I am having now

1206×215 17.5 KB

I want to make it so that each box will have different widths, depends on the length of text inside it.

4

Thanks for the screenshot. It appears that Wix always keeps the width of these horizontal repeater items the same and, if necessary, wraps the text and consequently expanding the height of that item.

I don’t know if you would like my above-mentioned solution any better where you would adjust the font size depending on how many characters you’re dealing with. That approach was used on a text element inside of a box that was not in a repeater.

Selection tags behave the way that you are hoping, but they do not support icons.

5

Reducing font sizes would make long titles too small as a title. I’ll check out Selection tags, I might let go icons if have to.

If you don’t mind, can you post your code of reducing font sizes bases on text length ? Who know I might need it somewhere.

Thanks.

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;
    });
});
7

Thanks @tony-brunsman , this is great.

8

So for clarity, as we have it so far it seems the answer to the question is “no”, there is no way to configure a repeater to add width rather than height to fit its contents?