I’m loosing my mind here.
I’ve created my own version of an accordion in Wix Studio because it doesnt let you connect them to a dataset yet.
The repeater is obviously really long when all items are loaded and expanded, so the section is super tall to accomodate it. However, on loading, the repeater is filtered so there’s less items than the full collection and the items are collapsed, so the items are narrower.
There’s buttons to expand / collapse items.
The section, although the height is set to auto, doesnt adjust height.
What I am left with is just a huge section with a lot of dead space at the bottom.
How do I fix this?
I tried inserting this:
// Adjust section heights after repeaters are filtered and initialized
function adjustSectionHeight(repeaterId, sectionId) {
const repeater = $w(repeaterId);
const section = $w(sectionId);
repeater.onReady(() => {
if (repeater.getTotalCount() > 0) {
const repeaterHeight = repeater.boundingBox.height;
// Calculate the repeater's height
section.style.height = `${repeaterHeight + 20}px`;
// Adjust section height dynamically
section.expand(); // Ensure section is visible
} else {
section.collapse(); // Collapse section if repeater has no items
}
});
}
adjustSectionHeight("#activerisk", "#Risksection");
adjustSectionHeight("#borderrepeater", "#Borderline");
adjustSectionHeight("#norisks", "#Norisksection");
});
and it didn’t work, in fact it just messed up the rest of my code, even when i inserted it right at the end of the code.
Full page code here:
import wixData from 'wix-data';
import wixUsers from 'wix-users';
$w.onReady(function () {
// Get the current logged-in user
const userId = wixUsers.currentUser.id;
// Query the 'AssessRiskLevels' collection to get the user's most recent risk data for both repeaters
wixData.query("AssessRiskLevels")
.eq("_owner", userId) // Filter by logged-in user
.descending("_createdDate") // Sort by the creation date, descending (latest first)
.limit(1) // Ensure we only get the most recent record
.find()
.then((results) => {
if (results.items.length > 0) {
const userRiskData = results.items[0]; // Get the most recent risk data (assumes only one record per user)
const userRiskData2 = results.items[0]; // For the second repeater
let itemIdsToShowForActiverisk = [];
let itemIdsToShowForBorderRepeater = [];
// Check which fields are true and add corresponding Item IDs for #activerisk
if (userRiskData.age === true) {
itemIdsToShowForActiverisk.push("f46c81f3-8874-4b2a-a546-7878e4337653");
}
if (userRiskData.hearingLoss === true) {
itemIdsToShowForActiverisk.push("3fa383f8-09c0-48bf-ac28-2b2c99bbb455");
}
if (userRiskData.visionLoss === true) {
itemIdsToShowForActiverisk.push("eb054d9e-5a46-44d8-a31a-2d0ea21ca627");
}
if (userRiskData.hbp === true) {
itemIdsToShowForActiverisk.push("3bd508b1-8fd5-40fc-95fc-73ab228e55cf");
}
if (userRiskData.ldl === true) {
itemIdsToShowForActiverisk.push("27b74a44-efbe-41a8-ab52-2617bb7c6f80");
}
if (userRiskData.diabetes === true) {
itemIdsToShowForActiverisk.push("45ebaaba-6d33-494e-b5fe-051fbaaf1981");
}
if (userRiskData.weight === true) {
itemIdsToShowForActiverisk.push("a57d992e-1bb4-40cc-89b9-249dcd064418");
}
if (userRiskData.smoking === true) {
itemIdsToShowForActiverisk.push("6b8214ed-b016-4cc0-98f5-b606d787de19");
}
if (userRiskData.alcohol === true) {
itemIdsToShowForActiverisk.push("4dba5791-f25f-4c2f-a470-8f563c69be95");
}
if (userRiskData.sleep === true) {
itemIdsToShowForActiverisk.push("5d6d97c0-0b09-4259-8aeb-3e9f714fa089");
}
if (userRiskData.stress === true) {
itemIdsToShowForActiverisk.push("6373e153-758e-4c8e-ac28-0fb8d7ba5340");
}
if (userRiskData.depression === true) {
itemIdsToShowForActiverisk.push("7c8a2557-e6f3-4071-b4e7-47bc4cd8b1e6");
}
if (userRiskData.airPollution === true) {
itemIdsToShowForActiverisk.push("30eab959-8c9e-491c-b545-488ccaa2eb3a");
}
if (userRiskData.lonely === true) {
itemIdsToShowForActiverisk.push("40ea299a-48ba-4b8d-b97f-24cd7c812a5a");
}
if (userRiskData.education === true) {
itemIdsToShowForActiverisk.push("869cc0ec-8494-414c-8159-d6e70345402e");
}
if (userRiskData.physicalActivity === true) {
itemIdsToShowForActiverisk.push("8b5cf0ea-b578-4d44-b23f-ff0a519ae964");
}
if (userRiskData.socialIsolation === true) {
itemIdsToShowForActiverisk.push("611f007c-8cf3-4eb3-ade3-7f24db9bbb0e");
}
if (userRiskData.stimulation === true) {
itemIdsToShowForActiverisk.push("6f966426-e8ab-47d8-bc0c-59f8f640fbc4");
}
// Check which fields are true and add corresponding Item IDs for #borderrepeater
if (userRiskData2.dkLDL === true) {
itemIdsToShowForBorderRepeater.push("27b74a44-efbe-41a8-ab52-2617bb7c6f80");
}
if (userRiskData2.dkHbp === true) {
itemIdsToShowForBorderRepeater.push("3bd508b1-8fd5-40fc-95fc-73ab228e55cf");
}
if (userRiskData2.dkWeight === true) {
itemIdsToShowForBorderRepeater.push("a57d992e-1bb4-40cc-89b9-249dcd064418");
}
if (userRiskData2.dkDiabetes === true) {
itemIdsToShowForBorderRepeater.push("45ebaaba-6d33-494e-b5fe-051fbaaf1981");
}
if (userRiskData2.suburban === true) {
itemIdsToShowForBorderRepeater.push("30eab959-8c9e-491c-b545-488ccaa2eb3a");
}
if (userRiskData2.midStimulation === true) {
itemIdsToShowForBorderRepeater.push("6f966426-e8ab-47d8-bc0c-59f8f640fbc4");
}
if (userRiskData2.midSocial === true) {
itemIdsToShowForBorderRepeater.push("611f007c-8cf3-4eb3-ade3-7f24db9bbb0e");
}
// Remove duplicate Item IDs (ensuring uniqueness)
itemIdsToShowForActiverisk = [...new Set(itemIdsToShowForActiverisk)];
itemIdsToShowForBorderRepeater = [...new Set(itemIdsToShowForBorderRepeater)];
// Debugging: log the itemIdsToShow arrays
console.log("Item IDs to show for activerisk (unique): ", itemIdsToShowForActiverisk);
console.log("Item IDs to show for borderrepeater (unique): ", itemIdsToShowForBorderRepeater);
// If there are no true fields for activerisk, hide all items in the repeater
if (itemIdsToShowForActiverisk.length === 0) {
$w("#Import207").setFilter(wixData.filter().hasSome("_id", [])); // Hides all items by setting an empty filter
} else {
// Query and filter the dataset for #activerisk
const datasetActiverisk = $w("#Import207");
const filterActiverisk = wixData.filter().hasSome("_id", itemIdsToShowForActiverisk);
datasetActiverisk.setFilter(filterActiverisk);
}
// If there are no true fields for borderrepeater, hide all items in the repeater
if (itemIdsToShowForBorderRepeater.length === 0) {
$w("#borderline").setFilter(wixData.filter().hasSome("_id", [])); // Hides all items by setting an empty filter
} else {
// Query and filter the dataset for #borderrepeater
const datasetBorderRepeater = $w("#borderline");
const filterBorderRepeater = wixData.filter().hasSome("_id", itemIdsToShowForBorderRepeater);
datasetBorderRepeater.setFilter(filterBorderRepeater);
}
}
})
.catch((error) => {
console.error("Error querying 'AssessRiskLevels':", error);
});
wixData.query("AssessRiskLevels")
.eq("_owner", userId) // Filter by logged-in user
.descending("_createdDate") // Sort by creation date, descending (latest first)
.limit(1) // Ensure we only get the most recent record
.find()
.then((results) => {
if (results.items.length > 0) {
const userRiskDataNoRisk = results.items[0]; // Get the most recent risk data
// Array to store IDs for items the user is NOT at risk for
let itemIdsToShowForNoRisks = [];
// Define associations between AssessRiskLevels fields and Import207 IDs
const riskAssociations = [
{ fields: ["ldl", "dkLDL"], id: "27b74a44-efbe-41a8-ab52-2617bb7c6f80" },
{ fields: ["airPollution", "suburban"], id: "30eab959-8c9e-491c-b545-488ccaa2eb3a" },
{ fields: ["hbp", "dkHbp"], id: "3bd508b1-8fd5-40fc-95fc-73ab228e55cf" },
{ fields: ["diabetes", "dkDiabetes"], id: "45ebaaba-6d33-494e-b5fe-051fbaaf1981" },
{ fields: ["socialIsolation", "midSocial"], id: "611f007c-8cf3-4eb3-ade3-7f24db9bbb0e" },
{ fields: ["stimulation", "midStimulation"], id: "6f966426-e8ab-47d8-bc0c-59f8f640fbc4" },
{ fields: ["weight", "dkWeight"], id: "a57d992e-1bb4-40cc-89b9-249dcd064418" },
{ fields: ["hearingLoss"], id: "3fa383f8-09c0-48bf-ac28-2b2c99bbb455" },
{ fields: ["lonely"], id: "40ea299a-48ba-4b8d-b97f-24cd7c812a5a" },
{ fields: ["alcohol"], id: "4dba5791-f25f-4c2f-a470-8f563c69be95" },
{ fields: ["sleep"], id: "5d6d97c0-0b09-4259-8aeb-3e9f714fa089" },
{ fields: ["stress"], id: "6373e153-758e-4c8e-ac28-0fb8d7ba5340" },
{ fields: ["smoking"], id: "6b8214ed-b016-4cc0-98f5-b606d787de19" },
{ fields: ["depression"], id: "7c8a2557-e6f3-4071-b4e7-47bc4cd8b1e6" },
{ fields: ["education"], id: "869cc0ec-8494-414c-8159-d6e70345402e" },
{ fields: ["physicalActivity"], id: "8b5cf0ea-b578-4d44-b23f-ff0a519ae964" },
{ fields: ["visionLoss"], id: "eb054d9e-5a46-44d8-a31a-2d0ea21ca627" },
{ fields: ["age"], id: "f46c81f3-8874-4b2a-a546-7878e4337653" },
];
// Iterate over risk associations
riskAssociations.forEach((risk) => {
// Check if ALL associated fields are false
const allFalse = risk.fields.every((field) => userRiskDataNoRisk[field] === false);
if (allFalse) {
itemIdsToShowForNoRisks.push(risk.id);
}
});
// Debugging: log the item IDs for the norisks repeater
console.log("Item IDs to show for norisks: ", itemIdsToShowForNoRisks);
// Apply the filter to the #nonrisk dataset
const datasetNoRisks = $w("#nonrisk"); // Dataset connected to #norisks
const filterNoRisks = wixData.filter().hasSome("_id", itemIdsToShowForNoRisks);
datasetNoRisks.setFilter(filterNoRisks);
// Handle visibility of the #Norisksection
datasetNoRisks.onReady(() => {
if (datasetNoRisks.getTotalCount() === 0) {
$w("#Norisksection").hide(); // Hide the section if no items to display
} else {
$w("#Norisksection").show(); // Ensure the section is visible if there are items
}
});
}
})
.catch((error) => {
console.error("Error querying 'AssessRiskLevels':", error);
});
// Expand/Collapse functionality for #noriskbox inside each item in #norisks
$w("#norisks").onItemReady(($item) => {
// Collapse #noriskbox by default
$item("#noriskbox").collapse();
$item("#up3").hide();
$item("#down3").show();
// Expand the #noriskbox on clicking #down3
$item("#down3").onClick(() => {
$item("#noriskbox").expand();
$item("#down3").hide();
$item("#up3").show();
});
// Collapse the #noriskbox on clicking #up3
$item("#up3").onClick(() => {
$item("#noriskbox").collapse();
$item("#up3").hide();
$item("#down3").show();
});
});
// Expand/Collapse functionality for #expandedbox inside each item in #activerisk
$w("#activerisk").onItemReady(($item) => {
$item("#expandedbox").collapse(); // Collapse by default
$item("#up1").hide();
$item("#down1").show();
$item("#down1").onClick(() => {
$item("#expandedbox").expand();
$item("#down1").hide();
$item("#up1").show();
});
$item("#up1").onClick(() => {
$item("#expandedbox").collapse();
$item("#up1").hide();
$item("#down1").show();
});
});
// Expand/Collapse functionality for #borderexpand inside each item in #borderrepeater
$w("#borderrepeater").onItemReady(($item) => {
$item("#borderexpand").collapse(); // Collapse by default
$item("#up2").hide();
$item("#down2").show();
$item("#down2").onClick(() => {
$item("#borderexpand").expand();
$item("#down2").hide();
$item("#up2").show();
});
$item("#up2").onClick(() => {
$item("#borderexpand").collapse();
$item("#up2").hide();
$item("#down2").show();
});
});
});
You can do this by toggling on the “Advanced settings” option in the size settings section. Additionally, adjusting the repeater’s margin or the section’s padding might help you find a solution. 