Show more button creating a gap at the bottom of the page

Ask the community
, ,
1

Hi there!
Any idea how I can solve this?:
I designed this About page which includes two toggle Show More / Show Less buttons. They work but the bottom of the page (before the footer) shows a huge gap when the buttons are showing Show More.
All the gaps between the different elements are minimal and they all move together with the toggle so that doesn’t seem to be the problem.
Here’s a link to the page https://www.sandfantasy.com/about and below is my code:

let fullTextone; // variable to hold the full text
let shortTextone; // variable to hold the short version of the text
let fullTexttwo; // variable to hold the full text
let shortTexttwo; // variable to hold the short version of the text
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextoneLength = 280;
// read the full text and store it in the fullText variable
fullTextone = $w(“#text128”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextone = fullTextone.substr(0, shortTextoneLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text128”).text = shortTextone;

const shortTexttwoLength = 280;
// read the full text and store it in the fullText variable
fullTexttwo = $w(“#text134”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTexttwo = fullTexttwo.substr(0, shortTexttwoLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text134”).text = shortTexttwo;

});
export function button5_click(event) {
// check the contents of the text element
if ($w(“#text128”).text === shortTextone) {
// if currently displaying short text, display the full text
$w(“#text128”).text = fullTextone;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text128”).text = shortTextone;
$w(“#button5”).label = “Show more”;
}//TODO: write your page related code here…//Add your code for this event here:
}
export function button6_click(event) {
// check the contents of the text element
if ($w(“#text134”).text === shortTexttwo) {
// if currently displaying short text, display the full text
$w(“#text134”).text = fullTexttwo;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text134”).text = shortTexttwo;
$w(“#button6”).label = “Show more”;
}//Add your code for this event here:
}

2

The first thing to try is to simply cut and paste the show more/show less parts on the page.

If you have each text box and button grouped or attached to it’s own container, then that is best as you can simply cut and paste that,

If you have them all as seperate elements, then please select them all and group them as one. It just makes it much easier to work with when they are all grouped together.

Once the above is all sorted, simply select the group and do a keyboard command for cut, DO NOT use the editor’s own cut or mouse right click cut.
PC - Ctrl+X - Cut / Mac - Command-X - Cut

Then simply move the footer up to the lowest element on your page and then paste back into the page the cut elements by using the keyboard commands for paste, DO NOT use the editor’s own paste of mouse right click paste.
PC - Ctrl+V - Cut / Mac - Command-V - Cut

This should paste the grouped elements back into the page in exactly the same place that they were in before you deleted them.

If you them test the site the extra white space at the bottom should have disappeared. :crossed_fingers:

3

Thanks a lot for trying to help GOS!!
However the gap doesn’t show in the editor. Only in the preview and live version.
Cutting and pasting using shortcuts didn’t do the job I’m afraid.

4

Did you ever get this resolved? I am having a similar issue. I have a huge gap between my pro gallery and the footer. It doesn’t show on the editor or the preview but is showing on my live site.

1 Like