Issue - button is clickable, but not visible

Hello everyone,

I am curious if anyone has even faced with the same issue and if anyone knows what might be a reason - released a new version of the app to Play Store, downloaded and see there are two buttons that are not visible/not fully visible in the UI though are clickable.

First case:
“Contained button” element.
How it should be:
1 - expected
How does it look (actual result):
1 - actual

Second case:
“Text button” element.
How it should be:
2 - expected
How does it look (actual result):
2 - actual
*Interestingly, the button is there - if I click on the place it is placed, it works, it’s just the button itself is not visible.

I tried to install the APK directly, not taking it from the Play Store - same problem, so looks like it comes out corrupted when building it in Adalo to publish.

Will be grateful for any feedback what could it be and how to solve it.

Are they grouped together? The icon could be moving off the button.

That was my initial thought, so for the second case I removed any grouping - the issue is still there. What I have on the screen now, after removing the grouping, is a “Card List” component and a “Text Button” (so, icon and button layout go together, as a single) component. No overlaps, no groupings, they are placed at the different parts of the screen, but still, the button is not visible for some reason.
Almost the same for the first case - the button overlaps with the picture and is set as arranged to Front, but still, no any grouping.
So, I am clueless.

The only thing I can think of is to play around with the background colors and see if it’s being moved around…

Hi Dmitrya,

Have you managed to find a solution for this issue? I am facing exactly the same issue. When I create a new testflight build, on my Iphone the buttons are clickable but not visible, which is strange becasue it did not have this behavior before.

Thank you in advance for your help.

Hi @Jal,

sure! I’ve finally managed to fix the problem, thanks to Ben from Adalo’s Support team. We’ve been trying different options:

  1. Making the buttons bigger (assuming they are too small and not properly handled because of device’s resolution).
  2. Making the button as a group and fixing its position to top.
  3. One more thing with some visibility conditions I have for the buttons.

But the final solution that worked for me was to create that component myself - instead of taking “contained button” and “text button” components, I simply did a custom one: take an “Ellipse” component, then take “Icon” component, and then make them into a single group applying the rules you need. This way it works, at least to me.
Hope that will help, let me know if otherwise or if you manage to find a different solution.

Hi @dmitrya

Thank you so much for your reply and for all your explanations. I did not try the 3 first options, but I created a custom button as you did and it worked. You rock !

Many thanks again for your help !

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.