Bug with text opacity

Hi,

I want to put text above an image. The order of my setup is as follow:
background image < rectangle shape (blur effect over image) < white text.

The rendering in the Adalo editor is fine but the displayed version when the app is shared adds opacity to the white text (don’t know why), making it less visible/readable.

Thanks for your help and take care!

Best,
Thibaut

Having the same issue. any work arounds?

Hi @thib and @ppvaldes :wave:,

Sounds like an element “ordering” issue, I tried to recreate your app and all seems to work fine on my end (PWA and Previewer)

Here’s how I ordered my elements and containers (groups) in the editor
Tip: If you want to correctly order your elements always do it from the "screen options"

Hope that helps :blush:

1 Like

Oh wow, I have never tried ordering from the screen view. Great tip, will give it a shot. Thanks!

So I tried reordering in the App View still without success. I also tried grouping the list elements and nope still transparency.

However If I make the text slightly come out of the image it works. That’s what I did for now.

I don’t know what it is. Now, I apply opacity to the image itself over the black background. In the example you provide you are applying opacity to the color block on top. But it is a different effect that “grays out” the image, instead of getting a harsh black contrast.

Looking at the screenshot you provided, the order is not quite correct.
Think of it like “layers” like in photoshop…

List

  • Group
    Title
    Description
    Created date
    Overlay Color (This element is overlaying the image with an opacity of 60)
    Background Image

Yes, what I am doing is that I am applying the opacity to the Image, not to the overlay color. Just because it provides a better effect. But Will try with a overlay color and check it out.

I think this is why you’re experiencing “this bug”

Hi, I’m having the same issue, I tried everything in this and was unable to come up with a fix. Can anyone help?

adalo 2
adalo 1

The workaround I found is to use a Transparency image instead of applying transparency to the rectangle. You can copy from this Adalo template: Clone Details Screen UI Kit to Jumpstart Your No Code App
They have a lot of images for this effect you can copy them into your app.

Thank you so much, appreciate the reply and the help!