I’ve seen a multitude of questions and responses over the past couple years, but no definitive fix. Is anyone aware of a workaround? It’s extremely frustrating.
I have a simple expand/collapse function for a read more/read less text field and it’s leaving a rather large white space at the bottom of my page above the footer.
Any thoughts?
Hello.
To remove an unwanted gap between the footer and the last element on the page, double-click the footer handle to remove the gap.
To learn more click here .
Good luck!
About white space between footer and the elements.
i have around 10 containsers. (height 50)
in the editor evrything is good no gaps.
now when i start the preview
9 of those containers are collapsed.
now evrything under the containsers move upwards as they should .
but the footer (wich has a smaller gap then 70 pixels with the last item)
does not moves upwards.
hows that?
kristof
Unreal. Can’t believe it was that simple. Thank you!
@volkaertskristof The issue could still be on other aspects like if the element is set to collapse or hide since the two operate differently. If the issue persists, share your site URL and the name of the page, a video of the issue and I will take a closer look.
Cheers!
@samuele Hi Sam, I was hoping you might be able to help me. I am having this issue with the white space. It could be something as easy as hide vs. collapse but I don’t always remember which I should be using… My code below. This site is here > https://www.loonlakemarina.com/ The white space doesn’t show in my editor but shows up in preview and on the live site. Any help is greatly appreciated!
$w.onReady( function () {
// Write your JavaScript here
// To select an element by ID use: $w(“#elementID”)
// Click “Preview” to run your code
});
function toggleFold(index) {
let $fold = $w( ‘#foldBox’ + index);
let $arrowDown = $w( ‘#arrowDown’ + index);
let $arrowUp = $w( ‘#arrowUp’ + index);
let $headerLine = $w( ‘#headerLine’ + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowUp.show();
$arrowDown.hide();
$headerLine.hide();
}
else {
$fold.collapse();
$arrowUp.hide();
$arrowDown.show();
$headerLine.show();
}
// collapse the other folds
// [1,2,3,4,5,6,7,8,9,10,11,12]
// .filter(idx => idx !== index)
// .forEach(idx => {
// $w(‘#foldBox’ + idx).collapse();
// $w(‘#arrowDown’ + idx).hide();
// $w(‘#arrowUp’ + idx).show();
// })
}
export function headerBox3_click_1(event) {
toggleFold( 3 );
}
export function headerBox4_click_1(event) {
toggleFold( 4 );
}
export function headerBox12_click_1(event) {
toggleFold( 12 );
}
export function headerBox6_click_1(event) {
toggleFold( 6 );
}
export function headerBox11_click_1(event) {
toggleFold( 11 );
}
export function headerBox10_click_1(event) {
toggleFold( 10 );
}
export function headerBox9_click_1(event) {
toggleFold( 9 );
}
export function headerBox8_click_1(event) {
toggleFold( 8 );
}
export function headerBox7_click_1(event) {
toggleFold( 7 );
}
export function headerBox1_click_1(event) {
toggleFold( 1 );
}
export function headerBox5_click(event) {
toggleFold( 5 );
}
export function headerBox2_click_1(event) {
toggleFold( 2 );
}