Expandable Text Box

Hello friends. I tried to use this code in a text and it worked, however, when I link to the database it doesn't work. How would you use this code with text from a particular database? Thank you.

I was able to get rid of them by deleting the extra space between words in the text box.

The code does not seem like a complete solution. The page still shows the html, up to the point the user selects the button. How do we make that code appear as text instead of HTML?

Aw man, I wish I'd seen this sooner! I had the same issue and after getting no response from my Wix support ticket, I made a workaround that might be helpful to some.

Essentially, instead of expanding the text alone, you're expanding the box itself. This way you get to keep the text formatting from getting messed up, plus you get to easily control what goes above/below the collapse, so it doesn't cut you off mid-word.

The expandable box is here (scroll to the bottom of the page):

https://www.wix.com/code/home/forum/community-discussion/expandable-text-box-bugs

LOL You folks are too funny. Yisrael, you're a smarty-pants. :)

The other good news is: I tried the solution and IT WORKS!

Thank you both so much for all your hard work. You are all amazing.

The good news is that Chaim said that I might not be as dumb as I look.

Hi,

So... I must have missed those little guys the first time I tried out your code. Sorry about that! Thanks for the video — that was really helpful.

This behavior does appear to be a bug. Using '.text' should have worked but it's apparently doing some strange things. I've alerted the developers about it.

Yisrael's workaround seems to work ok but it's not ideal because for the shortText, you're basically taking an html string and chopping off all the end tags. So you're dependent on the browser to "guess" what the right thing to do is.

Here's an improved version of Yisrael's code that doesn't suffer from the problem you mentioned earlier ("Though initially, the HTML code appeared on the site!"):

let fullText;
let shortText;
$w.onReady(function () {
	const shortTextLength = 350;
	fullText = $w("#inghamHistory").html;
	shortText = fullText.substr(0, shortTextLength) + "...";
	$w("#inghamHistory").html = shortText;
});
export function showMore_click() {
	if ($w("#inghamHistory").html.length < fullText.length) {
		$w("#inghamHistory").html = fullText;
		$w("#showMore").label = "Show less";
	} else {
		$w("#inghamHistory").html = shortText;
		$w("#showMore").label = "Show more";
	}
}

Hope this helps!

Hi Chaim,

Thanks for your response. I actually used the same exact JS on the site which prompted the original earlier post (see above) where I am seeing a bunch of &nbsps scattered throughout the whole text content.

Please see video: https://www.useloom.com/share/25d172fd85074b3fac82beffc3ac32e1

Hi,

I'm a QA guy. :) Yisrael kinda went in the wrong direction when he suggested that you should use the 'html' property everywhere; actually, the better plan is to use the 'text' property everywhere. Since you're not formatting your text, there's no reason to use 'html'; using 'text' keeps things nice and simple. And this line:

shortText = fullText.substr(0, shortTextLength) + "...";

doesn't work correctly because 'shortText' is taking a substring of the html-formatted text, which includes all the html tags and such. And then when you do this:

if ($w("#inghamHistory").html === shortText) {

the comparison is false because the current html contents don't match the strangely-chopped-up html string in 'shortText'.

Anyway, if you just use the 'text' property everywhere, it works great. Here:

let fullText;
let shortText;
$w.onReady(function () {
 const shortTextLength = 350;
            fullText = $w("#inghamHistory").text;
            shortText = fullText.substr(0, shortTextLength) + "...";
            $w("#inghamHistory").text = shortText;
            });
export function showMore_click() {
 if ($w("#inghamHistory").text === shortText) {
                $w("#inghamHistory").text = fullText;
                $w("#showMore").label = "Show less";
            } else {
                $w("#inghamHistory").text = shortText;
                $w("#showMore").label = "Show more";
            }
        }

Take a look at the documentation for more information about using 'text'.

Hope this helps!

Haha! Thanks again. Heading of to dreamland now. :)

BTW2 - I'm going to pass this issue on to QA and see if they've got something interesting to say.

Glad it worked out for you.

BTW - See this article on NBSP. So, the "weird" text that you refer to isn't completely weird - then again, my mom still thinks I'm cute.

Thanks for your kind words.

The work-around works! :D Though initially, the HTML code appeared on the site! lol

https://www.useloom.com/share/99fb2c60a0b84a17b764c27c3907f592

Thank you so much for your quick response, Yisrael. Much appreciated!

Hi,

First of all, cool site - really interesting.

To be honest, not really sure why this is happening, but I think that the text routines are trying to be "too smart". I changed .text to .html and it seems to work OK.

let fullText;
let shortText;
$w.onReady(function () {
			const shortTextLength = 350;
			fullText = $w("#inghamHistory").html;
			shortText = fullText.substr(0, shortTextLength) + "...";
			$w("#inghamHistory").html = shortText;
			});
export function showMore_click() {
			if ($w("#inghamHistory").html === shortText) {
			    $w("#inghamHistory").html = fullText;
				$w("#showMore").label = "Show less";
			} else {
				$w("#inghamHistory").html = shortText;
				$w("#showMore").label = "Show more";
			}
		}

Let me know if this works OK for you.

Yisrael