Elements suddenly out of place

I have a text input search bar with a list below, that has a “clear input value” icon on the right end that only shows when the text input is not empty. I’ve had it for weeks and it was working fine.
All of a sudden, when the text input is empty and the icon isn’t showing, everything is out of place.

What changed in Adalo?

@afonso Can you share a screenshot?

I am assuming you have the input field & icon overlapped on each other, if yes, please avoid doing that and try to put them next to each other instead.

Yes, they are overlapped, as is the magnifying glass on the default search bars that Adalo offers. They’ve been working fine ever since I built it, weeks ago, but suddenly this happened.

I’ll have to make it “always visible” to prevent this from happening

why not use the search bar component?

this is the search bar component, to which I added an icon at the right to clear the input value, which is pretty standard in many apps’ search bars.

Hey @afonso,
Did you make the whole search bar a group (with both icons). If not, you should.
If you are still having problems, a transparent rectangle next to the icon and have it be the same height as the icon. This will help hold the space when the icon disappears.

Hi @Michael. They were grouped. I opted to make the icon always visible, so as to not add additional elements.
Thank you both for your help!