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

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

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

$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

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