Same font color showing differently when a condition for Input versus Text element on iPad

For some reason on my iPad, the font color of text for a locked input box is different from the font color on a text element. In both situations I’m using a condition to set the font color to the same. The condition is triggering correctly as both are switching to green; however, the green on the locked input box is not the correct green.

On my Chrome web browser on PC, and my Chrome browser in Android the font color is the correct green on both the input box and the text box.

Any suggestions as to what is going on?

Send images of your issue and conditions… Also is there any other styles conflicting, like opacity, or anything?

No opacity overlays or settings that are unique. These are both supposed to be the green you see for the text “Scoring Scale.” The ABC QRS is a locked input box. On Chrome on desktop and on Android phone it looks like the same green as expected, but on my iPad I get what you see in the image.

This is also happening for another set of color conditions for a black color, but not for blue, yellow, and a burnt read I’m using. It’s odd.

Makes no sense to me.

Has to be overridden somewhere. Copy those elements into a fresh test page and try again.

Also, the light green is awful on contrast. Keep the dark green lol.

Easier said than done. This page has a ton of work done. It clearly has something to do with Apple.

And agree, the light green is dreadful and not the color I intended.

@bryan.holmes On the Apple device any accessibility settings enabled? Like high contrast or anything? Or the system-wide font size being changed?

@troy.roberge peak UI/UX is white text on a yellow background chefs kiss

1 Like

Nope. And I just tested on a generic page and it still replicates. For some reason the color of “7fb069” when set for text shows up correctly but for a locked input box it shows up as the brighter green for no apparent reason.

That just sounds like a conditional on the Style itself has something like "This input is disabled* with a different color. (not on the input but on the style the input is using)

Ooohhh good idea. I am actually fairly interested in hearing what the issue is.

strip the conditions, make a completely different element, and see what happens? Maybe even just test on a border, to make it even more different.

If it’s on the “style” where do I edit that?

Looks like this is the answer; however, I have no idea in Bubble how to address this. Any suggestions?

I found the issue and the solution.

On some browsers, when an input box is disabled, the color of the text within the input box is lightened (or otherwise altered).

This was undesirable for me. To get the same functionality of a disabled input box without disabling the input box (so that the font color would stay true to what I intended) I put the input box in a group that was align to parent. Let’s call this “groupParent.”

Then within groupParent I added another group (let’s call it groupOverlay) that was the same size as the input box and put it overtop (via right click on it and move to top,). I positioned groupOverlay and the input box in the same spot within groupParent. This made it so that groupOverlay blocks the user from editing the input box.

I wrote all this out for someone in the future that might find it valuable.

2 Likes

Couldn’t you have just used a conditional that says when xxx, color = xyz?

The settings is on the browser side. So that wouldn’t help.

I’m wondering if the link you sent would work… just overriding it with some CSS marked as !important

Not sure. Beyond my paygrade on CSS.

This topic was automatically closed after 70 days. New replies are no longer allowed.