Thanks Matthieu, Iâll look into it, itâs really weird!
Hi Matthieu and others,
As my custom-code skills have progressed a little bit, Iâd still hope an answer can be found to have this plague of excess white space addressed:
Preference 1: have the excess white space removed in its entirety â @matthieu_chateau does the screen print with details of this white space help you understand what it is and if it can be removed?
Preference 2: be able to color the background in line with the rest of the website â @matthieu_chateau do you know how I can address this piece of the website (I donât see any ID) / what custom code addresses its background coloring?
This is what I have tried so far, but without any luck:
#div.content section {background: rgb(249,249,255);
background: radial-gradient(circle, rgba(249,249,255,1) 0%, rgba(255,255,255,1) 100%);}#div.content {background: rgb(249,249,255);
background: radial-gradient(circle, rgba(249,249,255,1) 0%, rgba(255,255,255,1) 100%);}#div.content section {background: rgb(249,249,255);
background: radial-gradient(circle, rgba(249,249,255,1) 0%, rgba(255,255,255,1) 100%);}#extra-div section {background: rgb(249,249,255);
background: radial-gradient(circle, rgba(249,249,255,1) 0%, rgba(255,255,255,1) 100%);}#div.extra-div section {background: rgb(249,249,255);
background: radial-gradient(circle, rgba(249,249,255,1) 0%, rgba(255,255,255,1) 100%);}
Details of this white space
element: <div class="extra-div" style="background: rgb(255, 255, 255); height: 235px; width: 100%;"></div>
selector: body > div.content > div.extra-div>
full XPath: /html/body/div[2]/div[33]
From the screen print it looks like itâs part of block âklaar3â, but if I disable that block, this line sticks to the previous block.
Hi @thijs
I have no idea what it is without seeing the full page in the Softr studio and all custom codes applied to this page as I never had this behaviour.
Update: I found that this is related to <!-- Stick footer to the bottom if the App is shorter than the viewport --> script. Which is made by Softr => untouchable.
There must be a reason why you have such a behaviour while the script is supposed to work without doing this. And the reason canât be found just by screenshots, impossible to debug without having everything in hands, it doesnât work like this.
You can ask one of the Softr customer service people to check in your app or give me an access to it (I wonât stay more than 15 min on it => I have work to do and Christmas is coming)
Hi Matthieu,
I understand you have things to do⌠So to make things easier I made an example website: https://adina2775.softr.app
In creating this example, I noticed the excess space is caused by the largest block AFTER a footer has been added. So it somehow has to do with this footer.
What e-mail address can I send the invitation to?
Sent by direct message.
Update: No large space or huge space seen during the test, everyhting works fine on my end.
Hi, Great work! Can you advise how I link the buttons to the actual blocks. Somehow, i have difficulties to figure this out. Could you provide an example? Also how do i make the content of the blocks variable based on the linked Record.
For example. I have a page with âList with vertical cards and tagâ block. These card link into detail pages where i created this tabs section. I have data pulling from airtable into these detail pages.
Thanks in advance
Important update
This is true for the tab feature as well as for any other custom code using javascript.
From now on, as blocks load faster than the footer code is being executed, all javascript codes should be inside the header custom code of the page level (same for app level by the way), unless a third party tool tells you to insert a code in the footer.
There might be some exceptions but as soon as you use window.addEventListener('block-loaded-BLOCKID', () => { in a code => header.
As soon as you use javascript that should be run on page load => header.
Otherwise the script might work 50 to 70% of the time⌠Which is not ideal
2 Likes
Great job Matthieu!! Thatâs really helpful. Thank you so much!
I changed the blocked-loaded listener to: window.addEventListener('DOMContentLoaded', () => {
and seems to be behaving.
Great custom code, I have been using it a lot in one of my projects! Surprised it isn´t a standard feature in Softr.
There is one thing that I have noticed that is behaving a bit weird when it comes to Calendar blocks. If the calendar block is connected to the first button, and therefore is displayed right away, everything works as it´s supposed to. But if the calendar block is displayed first when pressing another button, the items in the calendar are âminimizedâ to âX moreâ as the block does when there is a lot of items on the same date, even though there´s only one item. Triggering for example a filter so the calendar reloads fixes it.
See images below before and after triggering a filter in the calendar block:
Hi,
I know exactly whatâs wrong, itâs specific to the calendar block.
Can you show your script for tabs (and tell me what is the calendar ID in this script) so I can quickly debug it?
Sure thing, thanks!
List3 (yes, I am lazy with the naming of blocks 
) is the calendar block.
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
background-color: #4B664D;
color: white;
font-family: 'Inter', sans-serif;
font-size: 15px;
padding: 10px 20px;
margin-right: 30px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 14px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #f5e507;
color: #182939;
}
.button:focus {
outline: none;
}
.button:active, .active {
background-color: #f5e507;
color: #182939;
outline: none;
}
@media (max-width: 480px) {
.button-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.button {
display: none;
}
.dropdown {
display: block;
width: 100%;
margin-top: 10px;
padding: 10px 20px;
border-radius: 14px;
border: none;
background-color: #4B664D;
color: white;
font-family: 'Inter', sans-serif;
font-size: 15px;
cursor: pointer;
}
}
@media (min-width: 481px) {
.button-group {
display: flex;
justify-content: center;
}
.dropdown {
display: none;
}
}
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">Arbete kommande vecka</button>
<button class="button" onclick="runButton2Script()">FĂśretagsinfo</button>
<button class="button" onclick="runButton3Script()">Alla arbeten</button>
<select class="dropdown" onchange="runDropdownScript(this.value)">
<option value="button1">Arbete kommande vecka</option>
<option value="button2">FĂśretagsinfo</option>
<option value="button3">Alla arbeten</option>
</select>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
function runDropdownScript(value) {
switch(value) {
case 'button1':
runButton1Script();
break;
case 'button2':
runButton2Script();
break;
case 'button3':
runButton3Script();
break;
default:
break;
}
}
</script>
</body>
</html>
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none"
});
function runButton1Script() {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none";;
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("list2").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list3").style.display = "none";
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("list3").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list2").style.display = "none";
console.log("Button 3 clicked");
}
</script>
</html>```Try this one, replace the last script by:
I added window.dispatchEvent(new CustomEvent('reload-block-list3')); , itâs mandatory for the calendar block when using the tabs feature.
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none"
});
function runButton1Script() {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none";;
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("list2").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list3").style.display = "none";
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("list3").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list2").style.display = "none";
window.dispatchEvent(new CustomEvent('reload-block-list3'));
console.log("Button 3 clicked");
}
</script>
Works great, thank you!
2 Likes
@matthieu_chateau Thanks for this solution, this works great on the calendar block, which we were having issues with as well.
Weâre seeing the same behavior on the open street map block but the reload event doesnât seem to have any effect on that block type. Does it require a different syntax?
Code below and screenshot of the behavior also attached.
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
//border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: none;
cursor: pointer;
background-color: white;
color: #2F3133;
outline: none;
border: none;
text-align: center;
border-bottom: 2px solid #D4D4D4;
border-left: 2px solid #D4D4D4;
border-right: 2px solid #D4D4D4;
border-top: 2px solid #D4D4D4;
transition .3s;
margin-right: 0em;
margin-left: 0em;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 8px;
padding-top: 8px;
}
.button:active, .active {
font-size: 14px;
font-weight: bold;
//border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: none;
cursor: pointer;
background-color: transparent;
color: #2F3133;
outline: none;
border: none;
text-align: center;
//border-bottom: 2px solid gray;
border-left: 1px solid #C8C8C8;
border-right: 1px solid #C8C8C8;
border-top: 1px solid #C8C8C8;
transition .3s;
margin-right: 0em;
margin-left: 0em;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 8px;
padding-top: 8px;
}
button:focus {outline:0;}
button:hover
</style>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">Projects</button>
<button class="button" onclick="runButton2Script()">Project Map</button>
<button class="button" onclick="runButton6Script()">Projects by Company</button>
<button class="button" onclick="runButton3Script()">Project Stats</button>
<button class="button" onclick="runButton4Script()">Calendar View</button>
<button class="button" onclick="runButton5Script()">Gantt View</button>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
</script>
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("block2").style.display = "block";
document.getElementById("block1").style.display = "none";
document.getElementById("chart1").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("chart3").style.display = "none";
document.getElementById("chart5").style.display = "none";
document.getElementById("chart6").style.display = "none";
document.getElementById("chart7").style.display = "none";
document.getElementById("calendar1").style.display = "none";
document.getElementById("gantt1").style.display = "none";
document.getElementById("projects").style.display = "none";
});
function runButton1Script() {
document.getElementById("block2").style.display = "block";
document.getElementById("block1").style.display = "none";
document.getElementById("chart1").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("chart3").style.display = "none";
document.getElementById("chart5").style.display = "none";
document.getElementById("chart6").style.display = "none";
document.getElementById("chart7").style.display = "none";
document.getElementById("calendar1").style.display = "none";
document.getElementById("gantt1").style.display = "none";
document.getElementById("projects").style.display = "none";
console.log("Button 1 clicked");
}
function runButton2Script() {
window.dispatchEvent(new CustomEvent('reload-block-block1'));
document.getElementById("block1").style.display = "block";
document.getElementById("block2").style.display = "none";
document.getElementById("chart1").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("chart3").style.display = "none";
document.getElementById("chart5").style.display = "none";
document.getElementById("chart6").style.display = "none";
document.getElementById("chart7").style.display = "none";
document.getElementById("calendar1").style.display = "none";
document.getElementById("gantt1").style.display = "none";
document.getElementById("projects").style.display = "none";
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("chart1").style.display = "block";
document.getElementById("chart2").style.display = "block";
document.getElementById("chart3").style.display = "block";
document.getElementById("chart5").style.display = "block";
document.getElementById("chart6").style.display = "block";
document.getElementById("chart7").style.display = "block";
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "none";
document.getElementById("calendar1").style.display = "none";
document.getElementById("gantt1").style.display = "none";
document.getElementById("projects").style.display = "none";
console.log("Button 3 clicked");
}
function runButton4Script() {
window.dispatchEvent(new CustomEvent('reload-block-calendar1'));
document.getElementById("calendar1").style.display = "block";
document.getElementById("chart1").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("chart3").style.display = "none";
document.getElementById("chart5").style.display = "none";
document.getElementById("chart6").style.display = "none";
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "none";
document.getElementById("chart7").style.display = "none";
document.getElementById("gantt1").style.display = "none";
document.getElementById("projects").style.display = "none";
console.log("Button 4 clicked");
}
function runButton5Script() {
document.getElementById("gantt1").style.display = "block";
document.getElementById("calendar1").style.display = "none";
document.getElementById("chart1").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("chart3").style.display = "none";
document.getElementById("chart5").style.display = "none";
document.getElementById("chart6").style.display = "none";
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "none";
document.getElementById("chart7").style.display = "none";
document.getElementById("projects").style.display = "none";
console.log("Button 5 clicked");
}
function runButton6Script() {
document.getElementById("projects").style.display = "block";
document.getElementById("gantt1").style.display = "none";
document.getElementById("calendar1").style.display = "none";
document.getElementById("chart1").style.display = "none";
document.getElementById("chart2").style.display = "none";
document.getElementById("chart3").style.display = "none";
document.getElementById("chart5").style.display = "none";
document.getElementById("chart6").style.display = "none";
document.getElementById("block1").style.display = "none";
document.getElementById("block2").style.display = "none";
document.getElementById("chart7").style.display = "none";
console.log("Button 6 clicked");
}
</script>
We only see the issue when the open street map block is not visible by default (or âtabâ 1).
If you swap your maps so that the open street map is the second option and not shown by default, thatâs the scenario where we run into it.
Indeed => visual bug!
Good to know that with google maps itâs all right.
No idea what can cause this
Thanks for confirming my sanity 
Iâll open a bug report on it.
Hi @matthieu_chateau, Thanks for this thread and insights!
Are all the hidden list-blocks loaded on page load?
I have a use case where I have about 5-10 list blocks on one page, but I only want to show one at a time. Ive noticed the more list-blocks I add and the more content they are supposed to display the slower Softr gets or even fails to load some or all blocks.
Here is my current setup: https://www.climesumer.com/actionhub (need an account to show items)
Is that true, and if yes, any idea how to work around that?
I highly appreciate your input. - Thanks
Hi Simon,
Blocks are hidden. Which means they are loaded - but hidden.
There is no way right now not to load a block with just javascript.
This might be implemented later by Softr.
That being said, careful => all your scripts related to this tabulation feature need to be in the header now (not the footer anymore).
1 Like