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 https://www.w3schools.com/howto/howto_css_contact_chips.asp
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?
Thanks @anthonyb , this is great.
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; }); });
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.
@anthonybThanks. Here's a screenshot of what I am having now
I want to make it so that each box will have different widths, depends on the length of text inside it.
@forrest.1001 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.