Bootstrap 5 theme change error

Wappler General Bugs
1

Wappler Version : 4.2.2
Operating System : Windows 10 x64 21H1
Server Model: NodeJS
Database Type: PostgreSQL
Hosting Type: Docker

Expected behavior

During Bootstrap change Wappler should change methods (I believe)

Actual behavior

Page is broken, errors in console.

How to reproduce

I can’t tell exact steps how to reproduce but looks during the designing page in Bootrstrap 4 I used some methods which Wappler can’t convert/change to Bootstrap 5.
I’ve also tried to change Bootstrap in my layout page - this won’t helped.

I was trying to add Bootstrap 4 back - more error appears: in action I can’t see already created modal windows, many visual bugs too.

My Wappler icnludes looks now like this:

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" id="index" components="{dmxSockets:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Tooltips:{},dmxBootstrap4Tooltips:{},dmxFormatter:{},dmxBootstrap4Modal:{},dmxBootstrap5Modal:{}}" is="dmx-app" appConnect="local" jquery_slim_35="local" bootstrap4="solar" -->

I’ve tried to delete Wappler include part hoping Wappler will re-create this part - but no success with that.

bs_update_error
bs_update_error2528×1352 2.05 MB

2

What was were your whole page code before trying to convert it to Bootstrap 5?

3

I’m sorry but I don’t get your question.

Is it possible to some how re-generate Wappler include part or properly convert page to Bootstrap 5?

4

Please paste your page code before you tried to convert it to Bootstrap 5.

5

@Teodor I was managed to get back page code before the upgrade.
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" id="index" components="{dmxSockets:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Tooltips:{},dmxBootstrap4Tooltips:{},dmxFormatter:{},dmxBootstrap4Modal:{}}" is="dmx-app" appConnect="local" jquery_slim_35="local" bootstrap4="solar" -->

6

But why did you have bootstrap 4 and bootstrap 5 components on the same page?

5dmxBootstrap5TableGenerator:{},dmxBootstrap5Tooltips

dmxBootstrap4Tooltips:{},dmxFormatter:{},dmxBootstrap4Modal:

how did you manage to achieve that?

7

I was trying BS 5 in the beginning of designing the page , then switched back to BS 4, then after tried BS5 with update - if that help you.

So again: Is it possible to some how re-generate Wappler include part?

8

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.

9

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:

image
image1592×967 70.5 KB

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" -->

11

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
12

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.

bs_error
bs_error2070×1360 1.91 MB

13

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

14

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

15

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

16

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

17

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 :slight_smile:

18

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.

19

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

20

I'm experiencing the same issue as @Petruchocho and @m_gabor

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.

@m_gabor described the same steps to reproduce the issue:

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