Known Issues in Upgrading BS4 to BS5.3…?

Wappler General Need Help
1

Hi there Wapplers…

I am looking at upgrading my app from Bootstrap 4 to 5.3… are there any known issues that may cause a change in behaviour when I do this?

Thanks!
Antony.

2

Summernote is not yet supported.

3

Oh blimey, that is a good reason not to move over! :flushed:

Glad I asked… :tada:

Thanks @brad!

1 Like
4

Even then your old summernote text areas would have to be converted to summernote lite. I converted a couple smaller dashboards and it was a pain. Unless you have a critical need to update I wouldn’t.

5

So is Summernote dependent on BS4?

I’d like to be able to use off canvas at some point … I that a BS5 feature? :thinking:

6

Summernote is BS4. In BS5 you need to use Summernote Lite. It’s not supported in 5.3 yet (or at least in wappler).

OffCanvas works well in BS5.3.

7

You should just used summernote light, all the styling is included there. No need for separate bootstrap specific styling.

1 Like
8

I’m not sure which one I am using at the moment @George… is it easy to see from my code?

<textarea id="i_activity_description" name="description" type="text" is="dmx-summernote" class="form-control input_text summernote c_right8" autocomplete="off" dmx-bind:value="activity.data.activity.description"
							dmx-bind:disabled="view_edit_mode.value=='view'" dmx-on:keypress="autosave_activity.start()"
							dmx-bind:toolbar="[['font',['style','bold','italic','clear']],['color',['color','undo']],['para',['ul','ol','paragraph']],['insert',['picture','link']]]" min-height="400" theme="lite" dialogs-fade="true"
							maxlength="9000"></textarea>
9

I think from the above you are on lite…

10

So that is ‘lite as in not full’ rather than ‘lite as in not dark coloured’…?

11

As far as I can see the lite theme is a separate theme that doesn’t require Bootstrap. Thats the version we use too.

12

You can tell by the links in your Head code …

Bootstrap 4 Summer note:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-bs4.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-bs4.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/dmxSummernote.js" defer=""></script>

Summernote Lite:

<script src="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-lite.min.js" defer></script>
    <script src="dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>
1 Like