Hi,
I managed to have buttons on my page that appears only when there are infos in my database (if there is an url in the database, the button shows up, if there isn’t, the button won’t appear).
My problem now is that the buttons only collapse correctly when they are places on a vertical line. If I place my buttons next to each other, there is a space between the buttons when one of them is collapsed.
Here is my code for one button (social), repeated for each of them :
$w.onReady(function () {
$w(“#dynamicDataset”).onReady( () => {
let url= $w(“#dynamicDataset”).getCurrentItem().social;
console.log(“url=” + url);
if (url) {
console.log(“inside if = true”);
$w(“#Socialicon”).show();
$w(“#Socialicon”).expand();
} else {
$w(“#Socialicon”).collapse();
}
} );
I can’t figure why it is working vertically but not horizontally… and can’t find anywhere a topic with this “horizontal” issue.
Help would be appreciate,
Thanks
What is the number of pixels between the elements? There is a 70/10 rule something in Wix.
Hi,
Yes I have check for this. The rule is that with a distance larger than 70px, two items won’t collapse.
When I try my code with a vertical alignement of the button, it works fine, and the buttons collapse as expected.
I check the distance and it is fine (15px).
I have tried with buttons right next to each other, with 1px spacing, I also try with half overlapping buttons, nothing works when I place them horizontally.
I am not sure “horizontal collapse” really exist, for what I have understand, but there must be a way to fill the white space between the buttons when some of them are hidden…
Have you tried using repeaters? I think it will solve your problem
I read your answer and immediatly thought it was the solution…
Now I am trying to setup the repeater and something is going wrong.
Let me explain in details :
I have a database that list 29 restaurants
I have a dynamic page that display each restaurant
Each restaurant have differents options (MENU/DELIVERY/ BOOKING)
Some of them have all the options (3 fields with info in the db), when some of them only have one (no delivery, no booking, so 1 field with info and 2 empty fields in the db)
My first idea was to create 3 different buttons for each option and link them with my database.
And what I want to do is hide the button if there is no info in the db.
I can see why repeaters should be a good idea, but I can’t figure out how to connect them in order to do what I want…
I am able to display multiple restaurant at a time, but not multiple fields… but I may be wrong…
I am a bit lost right now…
I think I got it, but I am still stuck.
This must be something about two databases linked to each other, and the repeater use the second one to display the image, but the first one to know if it has to display them or hide them… but that is to hard for my coding skill…
I you want to see perfectly what I am looking for, think about the social icons bar.
I want exaclty this arrangement of buttons, but linked to a database so if a restaurant don’t have a social media, the buttons disappears and the others re-arrange on the left…
Yes, you need 2 databases. One for the restaurants and one for the buttons repeaters.
I suggest you to create new collection with restaurant name (the exact restaurant name as in the first collection) and a column of buttons. Now, every raw will contain the name of the restaurant and the button it has. For instance:
rest1 | MENU | link_to_rest1_menu_page
rest1 | BOOKING | link_to_rest1_booking_page
rest2 | MENU | link_to_rest2_menu_page
rest2 | DELIVERY | link_to_rest2_delivery_page
rest2 | BOOKING | link_to_rest2_booking_page
rest3 | MENU | link_to_rest3_menu_page
…
Note that each restaurant will have number of records as the number of buttons it supports.
Now, in restaurant dynamic page you can add a database bound to this collection and filtered by the specific restaurant. Than you use repeaters under this filtered database in order to display the button.
Eli
I think you can manage it with one, I did some pretty crazy repeating page for a client this weekend that reminds me a bit about your thing. Please share a screenshot instead on how you want the page to look like and also where the buttons / value should be placed and I will look at this.
Thanks for the replies.
@Eli, I have some trouble having two databases on the same page. When I am on my dynamic page, I can only link objetc to the database it comes from, nor to another one database… Actually, there are 29 restaurants, with 4 differents buttons (maybe 6 in near future). If I could find a solution that didn’t comes with a database with 1 element /restaurant/button it will be less pain…
@Andreas : here is my actual code and a screenshot of what it looks like now, and what I would like to have. Hope you will find something here.
$w.onReady(function () {
$w("#dynamicDataset").onReady( () => {
let url= $w("#dynamicDataset").getCurrentItem().deliveroo;
console.log("url=" + url);
if (url) {
console.log("inside if = true");
$w("#Deliverooicon").show();
$w("#Deliverooicon").expand();
} else {
$w("#Deliverooicon").collapse();
}
} );
$w("#dynamicDataset").onReady( () => {
let url= $w("#dynamicDataset").getCurrentItem().uberEats;
console.log("url=" + url);
if (url) {
console.log("inside if = true");
$w("#Ubericon").show();
$w("#Ubericon").expand();
} else {
$w("#Ubericon").collapse();
}
} );
$w("#dynamicDataset").onReady( () => {
let url= $w("#dynamicDataset").getCurrentItem().carte;
console.log("url=" + url);
if (url) {
console.log("inside if = true");
$w("#Menuicon").show();
$w("#Menuicon").expand();
} else {
$w("#Menuicon").collapse();
}
} );
$w("#dynamicDataset").onReady( () => {
let url= $w("#dynamicDataset").getCurrentItem().meeting;
console.log("url=" + url);
if (url) {
console.log("inside if = true");
$w("#Meetingicon").show();
$w("#Meetingicon").expand();
} else {
$w("#Meetingicon").collapse();
}
} );
} );
Sad thing is that if I put my button on a vertical line (on top of each other instead of next to), it works perfectly…
Reviving a quite old topic here - is there any solution for this nowadays?
@brett-haralson ?
Hey Plon - I’m not sure. If you are having this issue I would open a new thread. Everyone has different circumstances. 
