Design view loses styling after specific changes

I’m experiencing this as well. The content page displays correctly (split view) when loading the page.

As I work, it eventually turns to this:

Sometimes, it will correct itself as I work.

Unfortunately, that’s all the info I have as to when it happens.

Ooh you mean it renders initially well but later on when you do some changes it looses the design?

What changes are you doing exactly?

And does it happen when with experimental options off as well?


Can’t say for sure what triggers the change. I am currently working in some page flows, but I can’t say that is it for sure.

Experimental is already off.

I think this is a different issue then. The initial issues was only for experimental on and directly with initial load.

So will splotches topic and if you could supply more replication steps it will be great.

It happens a lot, so I’ll try to keep an eye on it!

I’ll post here as I see it happen:

  1. Split view. Made an edit in the code split view and hit save – formatting lost. But then I undid that edit, restarted Wappler and performed the same edit without issue. The edit was part of a modal.

Yes it is important to know exactly where you edit. When you are editing in the root of the body for example we refresh the whole design view. While when editing nested elements only those get partially refreshed.

So if you can reproduce it exactly, do include the exact html code as well.

Another example…

I actually think this is happening on save.

I made changes in the app structure (not in the code) and saved the content page–I think that is when the formatting is lost.

Can you supply some minimal test pages to reproduce?

Can’t break from building right now, but will try to carve off some time another day.

1 Like

This has started to happen to projects for me too.
(5.1.0, NodeJS, Mac M1)

It affects any page that isn’t in the root views folder (in a subfolder). My project is set to be links relative to document but until very recently (perhaps 5.0.4) it wasn’t an issue and those pages could be rendered correctly in Design view.

After changing the project to site root relative I noticed that the Bootstrap CSS and JS file links in the layout page were missing the leading /
Adding it manually seems to have corrected it

You need to resave tour page(s) in order for the links to be changed. They are not changed automatically when you change the links relative settings.

I did re-save the page between but for some reason the links were still missing the leading slash. It seems to be fine now. I’ll keep an eye and let you know if I get any further recurrence.

Just working through the layout pages to make sure they all are updated after changing to site root relative, this is an example:

pre re-save:

after re-save:

The dmxRouting.js is updated with the correct / at the start but the bootstrap link isn’t

I think I’ve identified which files it is…
It is all the files added from the project settings frameworks (style.css, fontawesome local, dmxAppConnect.js etc) They’re being left alone while all the others are being updated.

Still have not had time for minimal test page, but for me this happens randomly but always on Save. Today, I’m working on elements contained within a modal as well as page flows. I am bouncing back and forth making changes inside both the flow and the modal, and then hitting save. The display loses formatting on Save. I re-open the page and it clears.

Here’s an example of my day…rinse, repeat.

Make a change in a flow, save, lose formatting.