How to Hide & collapse an empty Elements that is in the same row

Ask the community
, ,
1

Hi…
I’m trying to do a social media icons that is linked to a database of my website members,

1017×565 32.8 KB

but when the data is empty i need the icon to hide and the other icons on the same row to rearrange in the Middle of the page but still cant do that as it’s not collapsed only hiding

1053×547 29.7 KB

$w("#myDataset").onReady( () => {
      let item = $w("#myDataset").getCurrentItem();
      if (item.image) {
         $w("#imageElement").show();
      } else {
         $w("#imageElement").collapse();
         $w("#imageElement").hide();
      }
   } );

this is the code that i used to hide an empty Elements

So how can I hide & collapse an empty icons that is in the same row then rearrange them in the middle of my page with same space in between and in many rows

2

To be honest, you simply can’t rearange, because you can’t move elements.
The only workaround would be to use for example a → multistate-box and create several possible scenarios different order and amount of buttons and then call the right state of the multistate-box.

If you also would like to see a new feauture in the velo-api, which would make a movement of elements possible, then take a look here…

…especialy here…
https://www.wix.com/velo/requested-feature/moving-elements-on-page