Modal not hiding on design screen

#1

Hi! I beleive it’s a bug. Basically, after creating a modal, wappler design view is completely blank. The modal works fine on the webpage, but it’s impossible to use wappler’s designing features with the modal interfering the design view.

Here is a screenshot of how the design screen looks after creating the modal:

image
image1314×1768 68.4 KB

Here after deleting the modal

image
image1294×1755 167 KB

These are my modal’s settings

image
image1075×1658 93.4 KB

This is how my modal looks on the webpage (that works perfectly fine)

image
image3222×1768 454 KB

In order to keep on coding I will design the modal on other view. I’m using NodeJS.

Update: The problem is in the page view, It’s seems like wappler it’s not getting the included files in the layout correctly. If I create the modal in the layout it works perfectly fine.

Thanks!!

2020: The Year in Review
#2

Does it disappear when you select some other element in the App Connect panel? Refresh the Design View?

#3

Nope

Grabación de pantalla 2020-08-23 a la(s) 19.06.40

#4

Founded these errors (they only appear on the design view on wappler)

image
image1338×618 31.4 KB

#5

I see a container inside the modal. Which I have never seen before. Are you sure it is supposed to be there?
Here is what I always see in my modals:

modals

#6

If you use a container put it inside the modal body. Always works well for me

#7

Thanks @gunnery and @web-works , but that is not the issue, already checked that before. As the first posts says

The content page is not working correctly with the files included on the layout. The modal worked perfectly fine on wapppler’s design view while using the layout page.

Maybe @George @Teodor can help me out (as always :slight_smile: ).

Thanks!!

#8

I have a feeling it’s the order in which all the include files are placed in the <head> section. Try moving the modal js file higher or lower and see if that fixes it. And the app.min.js, too.

#9

This is my order:

<script src="dmxAppConnect/dmxAppConnect.js"></script>
<base href="/">
<meta charset="utf-8" />
<title><%=_('titulo')%></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">

<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />

<!-- third party css -->
<link href="assets/css/vendor/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- third party css end -->



<meta name="description" content="<%=_('descripcion')%>">
<script src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css" />
<link rel="stylesheet" href="dmxAppConnect/dmxPreloader/dmxPreloader.css" />
<script src="dmxAppConnect/dmxPreloader/dmxPreloader.js" defer=""></script>
<link rel="stylesheet" href="dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="dmxAppConnect/dmxNotifications/dmxNotifications.js" defer=""></script>
<script src="dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>
<link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
#10

Not sure if there’s anything wrong there or not. Try moving the line:

<script src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>

further down. Just one line at a time and see if it fixes it. Otherwise I think one of the Wappler team may be able to give more info.

#11

Continuing the discussion from Modal not hiding on design screen:

Nobody? @Teodor @George @TomD @JonL :slight_smile:

#12

Weird stuff. It never happened to me and as it’s in the editor it would be difficult for anyone but Wappler team to investigate.

1 Like
#13

Wappler team is not answering.

#14

Error seems to be related to jQuery, is it correctly included or perhaps included more then once?

#15

No, it’s included correctly. The issue appears only on the content page. The layout page (the one where all included files are), works fine on wappler.

#16

How does the comment tag look like on the top of the content page?

#17

Like this

<!-- Wappler include head-page="layouts/principal" fontawesome_4="cdn" is="dmx-app" id="comprobantes" appconnect="local" jquery_slim_34="local" bootstrap4="custom" components="{dmxBootstrap4Modal:{},dmxDataTraversal:{}}" -->

#18

What happens if you switch off App Connect view? The icon to the left of the preview in the header.

#19

I don’t understand which icon you re talking about

#20

Screen Shot 2020-08-26 at 9.33.52 AM