expandable text - too much space

I have achieved expandable text (yay - new to code!), however, there is too much space now between the short text and the button - what to do?

this is how it looks

hello, maybe the top of your button is not touching the bottom of the text box. it should be when you want your button to move with your text when clicked.

Thanks for your reply - it is touching. I haven’t worked on this for awhile - maybe I can copy someone’s code where it does work.

Hi,
I’m not sure I fully understand the scenario, when the long text is collapsed you can see the space?
Please share the code you are using to collapse and expand the long text.

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 0;
// read the full text and store it in the fullText variable
fullText = $w(“#text104”).html;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “”;
// set the contents of the text element to be the short text
$w(“#text104”).html = shortText;
});
export function button5_click() {
// check the contents of the text element
if ($w(“#text104”).html.length < fullText.length) {
// if currently displaying short text, display the full text
$w(“#text104”).html = fullText;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text104”).html = shortText;
$w(“#button5”).label = “Show more”;
}
}

this is the code i use… @ridiculoushobby

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 0;
// read the full text and store it in the fullText variable
fullText = $w(“#text104”).html;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + “”;
// set the contents of the text element to be the short text
$w(“#text104”).html = shortText;
});
export function button5_click() {
// check the contents of the text element
if ($w(“#text104”).html.length < fullText.length) {
// if currently displaying short text, display the full text
$w(“#text104”).html = fullText;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text104”).html = shortText;
$w(“#button5”).label = “Show more”;
}
}

1 Like

Thanks - I tried and tried. Same result. I gave up and did it a different way - much easier!
See https://ridiculoushobby.wixsite.com/control-growth-now
I got the idea here:How to Create an Accordion Menu in WiX - nine19 Web Design - YouTube

Hi @ridiculoushobby ,

I’m glad you found an existing component that fit your need.

It turns out the issue only reproduces on your site. I’ve tried recreating the example with the same text on a new site and it worked fine. I reported a bug. Hopefully it’ll be fixed in the near future and other people won’t suffer from it.

This looks like a pervasive problem, not a random bug on a single site. I have the same problem as the OP: too much space between the short version of the text and the More button.

Like the OP, the More button is touching the bottom of the text box. Screenshots below. Live site here: https://lucyisabel.wixsite.com/ratherapy

The problem negatively effects user experience because the section with expandable text should be narrow.

Wix people, will you help?


Code:


Screenshot of the problematic extra space:

@yevhen-pavliuk this problem occurs on my site too (see below). Can you help? I’ve been waiting for an reply for months …

Hi @emailedfromfacebook ,

I’ve rechecked your site. Your text component has a default height that serves as the minimum height—it cannot shrink more than that even if there’s no content. You can see that by clearing the content of the component:


So just decrease the height to the minimum in empty state and restore the content. After that everything will work as expected—the content will shrink to the height of the text when the text is shortened.

Sorry that I didn’t figure it out earlier when I first looked into it.