Bootstrap 5 theme change error

[Teodor]

Well usually these are converted just fine. The question is what exactly did you do (so we can try recreating this) on this page to mess the things like that.

[Petruchocho]

So I’ve clean Wappler include from old BS5 includes and now looks like this:
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" id="index" components="{dmxSockets:{},dmxFormatter:{},dmxBootstrap4Modal:{},dmxBootstrap4TableGenerator:{}}" is="dmx-app" appConnect="local" jquery_slim_35="local" bootstrap4="solar" -->

Now when I try to add BS5 on my content page I get this error and broken preview:

And include part looks like this:
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" id="index" components="{dmxSockets:{},dmxFormatter:{},dmxBootstrap4Modal:{},dmxBootstrap4TableGenerator:{},dmxBootstrap5Modal:{}}" is="dmx-app" appConnect="local" jquery_slim_35="local" -->

[Petruchocho]

So to reproduce the error:

1. Create blank project - Docker / NodeJS - it will be create with default BS 5 (you can’t select BS version in project creation wizard)
2. Convert index and main to BS4
3. Save both main and index
4. Add some compontents like Modal or BS Table Generator
5. Save both main and index
6. Add some BS 5 theme on both index and main - accept convering dialog
7. You have broken preview

[Petruchocho]

Some more evidence:

1. Created Docker + NodeJS project
2. Added some components to index.js
3. Trying to change from default BS 5 theme to some one else
4. Wappler include part is change BUT when you’re trying to save index.js - it won’t save and App Structure in designer is gone.

[Petruchocho]

@George when we can expect this to be fixed? Currently BS 5 themes is just un-usable in Wappler. 4.2.2

[dogpoint]

I think the same issue, it happened to me back in september, hope a few more screenshots will help.

What am I doing wrong? Bootstrap not rendering?

Just ran into the same issue, but the solution above didn’t help. Blank nodejs project with BS5, tried to use a bootswatch theme and the page doesn’t render in design view. The layout file seems ok, therefore (I assume) looks ok in browser, but the page doesn’t render in wappler. [image] [image] Not sure it is a bug or a feature, but the BS5 bootswatch themes are missing under Project settings/Frameworks. (added BS5 local instead, then added the bootswatch theme to the layout manually) [i…

[Petruchocho]

Just found that I’ve reported this issue back in April - Bootstrap 5 themed version and this hasn’t yet been fixed.

[Petruchocho]

Wapplers,
Is it only me experiencing this problem with Bootstrap 5 themes? Why there is such ignorance from Wappler Dev Team?

[Teodor]

There is no “ignorance”.
We are looking at the issue. When a team member is assigned to a bug report, this means we are working on this.
Posting every day the same thing in the topic won’t really affect the speed the fix is released or change the update date

[Petruchocho]

Thank you for explanation but original topic that was create in April - Bootstrap 5 themed version - hasn’t been marked as “assigned”. I believe this two topics should be merged.

[Teodor]

We don’t need two topics explaining the same thing. The old one has been archived now, this one is more than enough.

[Apple]

I’m experiencing the same issue as @Petruchocho and @dogpoint

Steps to reproduce: Create a Blank project (NodeJS/Docker Hosting), go to Add Framework and select a Bootswatch 5 theme (e.g.: Cyborg, which comes with a dark background). Clearly, the rendered background keeps white even after saving and refreshing the view.

@dogpoint described the same steps to reproduce the issue:

What am I doing wrong? Bootstrap not rendering?

Just ran into the same issue, but the solution above didn’t help. Blank nodejs project with BS5, tried to use a bootswatch theme and the page doesn’t render in design view. The layout file seems ok, therefore (I assume) looks ok in browser, but the page doesn’t render in wappler. [image] [image] Not sure it is a bug or a feature, but the BS5 bootswatch themes are missing under Project settings/Frameworks. (added BS5 local instead, then added the bootswatch theme to the layout manually) [i…

I hope a fix comes out soon (or a workaround for the time being)

[Petruchocho]

@George when we can expect to have this colorized Bootstrap 5 themes issue fixed?
Original bug was reported back in April.

Should I keep using Wappler like this?

[George]

It is not completely clear to me the issue you are having …

Are you saying that you can’t use any of the Bootswatch themes?

Or are you saying that you can’t switch to bootstrap 4 when you are on bootstrap 5?

Or the bootstrap 5 doesn’t render in content pages? Local or cdn? With or without the usage of the theme manager

It is difficult to track topics with multiple issues in them. Try to have a separate topic per issue.

[Petruchocho]

Separate topic was created back in April, but @Teodor merged it with this topic.

This issue is very easy to replicate:

1. Create blank project (for instance NodeJS)
2. Add some web elements
3. Change default Bootstrap 5 default to some colorized
4. Wappler preview broken

@George if you too busy to replicate this issue I’m attaching project that I’ve created in Screen Recording above.

test.zip (557.7 KB)

[Teodor]

This has been fixed in Wappler 4.4.3