I’m trying to create a “Save changes button”, but I’m struggling to make it work when I change the user’s profile picture.
I’ve set up the following logic: user clicks on delete profile picture button → a popup asking “are you sure?” is displayed → user clicks “yes” → state “profile picture changed” of the button save changes is set to “yes” → it becomes clickable
However, it just won’t become clickable.
In my latest try I’ve set the button to be unclickable by default and to become clickable if the “profile picture changed” state is set to “yes.” The state changes, yet the button just won’t become clickable:
It doesn’t work if I do the opposite (setting the button to be clickable by default and to become unclickable if the state is “no”) either.
What is the element setting?
What the last condition in green do? (probably just layout stuff… but just to be sure) . Any other condition that could make it not clickable?
What is the element setting?
What do you mean by “element setting”?
What the last condition in green do? (probably just layout stuff… but just to be sure)
Yes, layout stuff. It’s a conditional in the button’s style.
Any other condition that could make it not clickable?
No. I had other conditions, relating to other fields being modified, but removed them to isolate this behavior.
Nevermind for settings. In your screenshot, there’s something strange. You have condition 1… twice! There’s an issue somewhere. Try to cleanup the condition (maybe delete the first one and create a new one under condition 3)
I see. Other are set on the styles. This is why you have the condition 1 twice. Actually, I think it’s more a Bubble bugs so you should submit a bug report. Condition 3 of style shouldn’t be green if Condition 1 of element is yes…
@lucascamp75
I guess your application is on version 26 or later because this is not a bug rather than the fact that Bubble has applied a modification version 26 so that the conditions applied on an element’s style override always the conditions defined on the element itself.
In other words, if you have a “Button” element and in the “Styles” tab for this button, you have a condition that sets the button background color for Yellow, and then if you add this button to your page and add a condition where you set this button’s background color to Green. It will always be displayed “Yellow” (i.e. the color that was inherited from the button Style).
Please check out the below link to see Bubble announcement for version upgrade 26 which adjusts the style override behaviour:
Having said that, to solve your issue, you will have to modify the style of your button OR create another Button style without the “This button isn’t Clickable” condition in the “Style” itself then use this button on your page.
Hope this solves problem ! Let me know should you need any further support.
I don’t understand why I need to change the style though. The conditional applies to when the button isn’t clickable, i.e. it doesn’t make the button clickable or not, which is where my issue lies.
@lucascamp75 Thanks for giving me the access to your application.
Kindly find below my findings:
Actually, I checked it out and it’s working. Once I delete the profile picture, the “Save changes” button becomes clickable but it’s just that its background color doesn’t change so it only seems like it isn’t clickable !!
In your form, there are 2 Fields other than the profile picture (Name & Description):
Name: Cannot be empty
Description: Can be empty
So…
If you delete the profile picture while the field “Name” is empty, then the button “Save changes” becomes clickable but its color stays grey since the field “Name” is empty !
If you would like to make the button’s color turn into the “Blue” color, you have to do the following:
1 - Delete the profile picture → Here the button will be clickable but with a grey color (try to hover it with the mouse and you’ll see that it’s clickable).
2 - Write any text in the “Name” field → Here the button will change its color to Blue color.
Only then the button color will change to Blue.
Please give it a try as I didn’t modify anything and let me know if you need any further information.
Well it’s not a bug. The button is in your page isn’t clickable after deleting the profile picture because your form didn’t pass the validation. (i.e. there is an empty field that shouldn’t be empty) in your case it’s because your “Name” field is empty while if you type anything in it then your button will turn to the Blue color.
This is due to validating fields in your page. I believe in your case, it would be great to mark this field with a RED “*” so that users know that it’s a required field and cannot be left empty.
Please don’t hesitate to reach out to me should you have any questions, always happy to help !
