I currently have a dynamic page with info on it. The info is currently on a strip split into 2 columns.
The data on this strip is connected to my content manager. So when I have inputted information into my manager the strip populates like this:
This is what it looks like when these particular organs are covered in a scan. However, when only 1 or 2 organs are covered (which would be in a different page), it is displaying like this:
My client isn’t a fan of the white space that is left over. And I cant shorten the strip any more as I have to leave room for other organs in other pages (when you design 1 dynamic page, it happens to all).
Is there a way I could put some sort of code on this strip to make the height auto, or a certain size when only 1 or 2 organs are in it?
Hi there Are you using a repeater to fill this data?
You are probably running into the issue discussed in the articles below. If there is more than 70px of space between the bottom of the repeater and the edge of the strip, then the collapsing of the repeater will not function correctly. I recommend shrinking the size of the strip until it is within 70px of the edge of the repeater. As long as the repeater is “attached” to the strip, it will then dynamically resize according to each page, whether there are 1 items or 10.
Thanks so much for your reply!
Although the elements are not set up in a repeater, they are containers which have hover boxes inside (when they are hovered they grow slightly, nothing important just a nice effect.
@niamhmcguinness Interesting setup, if you are not using a repeater then what is the code you use to hide/show the various elements depending on the page?
@lmeyer Currently no code is needed for this set up.
I placed all of the container boxes with their name and hover effect etc on the dynamic page, how I want them to be designed.
I then linked each of these to a section in the content manager, and simply when I don’t fill in a section it doesn’t show up. Even the Wix Help team aren’t sure of it, they were quite confused when I tried explaining it to them and directed me here in hopes I would get some advice!
In this section, Abdominal, there’s quite a few areas covered so I just filled in what they are on the content manager.
And so when I go to the live site, all 5 organs covered areas are filled in, and only 2 for musculoskeletal because that’s how many I filled in.
However, in pages such as musculoskeletal there is a rather big blank space (where other organs would go if they were covered, such as how they are in the Abdominal page). I just feel like I have to add a little code to this strip such as auto height but just can’t seem to find it anywhere!
I hope this makes a little sense! Apologies for the length!
@niamhmcguinness Ah now I understand, thank you for the explanation. There is not a way to change the height of the strip via code, but luckily that’s not the problem. The problem you are running into is that even though the element does not appear, it is merely hidden, which means it takes up the same amount of space on the page.
What we want is for the elements to collapse if they are not in the database.
I do something similar on my site. Below is the working code that I use to accomplish this, just swap out the element IDs for your own and change the 3 instances of “yourFieldKey” to the field key of the database column that holds the image. If the entry is empty for that row then it will collapse the relevant hover box.
Copy/paste everything between the orange texts to repeat for each database image column, and change the field keys and hover box IDs.
$w.onReady(function () {
$w("#yourDataset").onReady(() => {
var item = $w("#yourDataset").getCurrentItem();
// Copy from here
if (item["yourFieldKey"] === "" || item["yourFieldKey"] === null || item["yourFieldKey"] === undefined) {
$w("#yourHoverBox").collapse();
} else {
$w("#yourHoverBox").expand();
}
// to here
});
});
Are you using a repeater to fill this data?
