Locked values in the design panel

Wappler General Bugs
1

Wappler Version : 4.0.0
Operating System : Windows 11
Server Model: None
Database Type: None
Hosting Type: Local

Expected behavior

What do you think should happen?

When I'm editing values in the design panel, sometimes some values are locked due to them being overridden by Bootstrap or Framework7 CSS files.

I should be able to overcome this by adding a new class for the element I'm trying to edit in the design panel.

Actual behavior

What actually happens?

Only adding one class doesn't work, I have to add 2 or sometimes 3 classes to get the values to be editable in the design panel.

Sometimes, I have to click away from the design panel then open it again to get the values to be editable, even after adding the new classes.

How to reproduce

Please see the included video, I built an app suing Framework7 and I was trying to edit one of the Framework7 buttons using the design panel.

2

Well, when the value is overriden by the framework CSS you cannot edit them in the design panel. That’s why they are shown as “locked”.

4

I see, however at the end, I am able to edit the locked values after adding 2 classes.

I guess what I’m asking is, why doesn’t this work after adding just one class?

5

I can’t really recreate this in my tests. Probably a specific issue with that specific element.
Have you tried adding your custom class, clicking outside the design panel and then going back?

6

Yes, I’ve tried that

It does work but for some reason clicking outside the design panel then going back to it only seems to work if I’ve added 2 new classes and not one

Sometimes, I don’t even have to click outside the design panel to be able to edit the vales but again this is only if I’ve added 2 classes not one

So it seems just adding one class doesn’t seem to allow me to modify locked values

I can confirm that this is happening with other elements with locked values as I just tried it on the page component which has locked values in Framework7

8

I did find an old post where someone faced a similar issue, however they were able to solve it by doing as you suggested above by clicking outside the design panel and going back after adding a custom class whereas for me, this only seems to work only after I’ve added 2 custom classes:

https://community.wappler.io/t/how-to-globally-change-bootstrap-theme-via-a-custom-scss/7549/28?u=raymond

Perhaps it might be able to provide a bit of help