"Sometimes visible" wrongly hides other components

[DylanS]

The “plan appointment” button should only be visible sometimes.
Problem I have is the “add ship” button, it disappears with it!

They do not have the same name, I already tried creating a new button, but the problem is still here.

Thanks:)

[DylanS]

Anyone has an idea how this is possible??

[anon78309838]

Hi Dylan,

Are you sure that a visibility rule is not also applied to the Add ship button? Or perhaps they are grouped and the visibility setting is set at the group level?

[gnb]

I have had the same issue. I have an element that I want only visible when a certain database value exists, so it starts out invisible. The problem is that the elements on top of it also disappear. @DylanS did you figure out a solution here?

[DylanS]

Nope, both buttons don’t have any relation to each other, but still they are both being hidden, so I choose for another solution.

[gnb]

Any ideas from the Adalo team @anon78309838? Should I submit a ticket?

I am trying to use a shape + change visibility because states aren’t yet available.

Here’s what it looks like pre-changing visibility setting

Here’s what it looks like once the box is invisible

I’ve also experienced a similar issue where adding the sometimes visible setting to the box just hide the dot and text altogether

[anon78309838]

If you have components grouped together and the visibility rule is made at the group level, all those components within that group will inherit that rule.

More information can be found here: https://help.adalo.com/videos/changing-component-visibility

[gnb]

Thanks Colin. I don’t think that’s the issue. The element I want to hide is not part of the group that it is displacing.

The dot and Expensive option get displaced to the top right when the square below (not part of the dot and Expensive grouping) is invisible

But once the square is visible again (because they clicked on the Dot/Expensive grouping, the grouping Dot/Expensive grouping goes back to the correct placement on the screen)

[ben1]

It looks like you may be facing two different challenges with the Way Adalo loads components. the first is the bug mentioned above when hiding stacked components based on viz rules. The other is the way the CSS(for lack of a better word) rules displays components that are side by side or top and bottom when one of those components is hidden.

The fix for the latter issue is to place a rectangle with either transparent background, or matching you app background color behind all of your slider elements and ensuring all elements sit entirely within this rectangle. Then group ALL slider components and the rectangle together. Keep your viz rules on the individual components though. Pford lkikes to call. this the Adalo equivalent of an HTML Div block. I think that makes the most sense.

The invisibility of stacked components is a trickier solve. The only thing I have found is to use the above solution AND then in the group of stacked elements, offset each element by like 1px left or right, it will not look perfect, but it will get you really close.

Let me know if that makes sense!

[gnb]

Thanks Ben, glad to hear there are work arounds!

[oper2k]

Hello,
I think you button “Add ship” is visible, but going up because your button “plan” is no visible. Try to delete this rectangle and run the app

[pford]

Yes I’ve noticed that sometimes rectangles can produce weird issues as well. Two more things to try:

1. Delete the square (rectangle) component and then re-add it.
2. (seems wrong but) Put the rectangle above the text
3. Make three different grouped versions of this status bar controlled by visibility conditions